begin process at 2010 03 21 23:35:59
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Recuperer un style em en javascript


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Recuperer un style em en javascript

jeudi 24 avril 2008 à 07:23:22 | Recuperer un style em en javascript

MATHIS49

Membre Club

Bonjour,

j'aimerais recuperer la taille
d'un div en Px qui est lui même en Em,
J'ai trouvé ce script :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
</head>

<body>

<div id="test" style="width:3em">toto</div>
<script type="text/javascript">
function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

alert(getStyle(document.getElementById("test"), "width"));

</script>
</body>
</html>

Le probleme est que tout marche pour le mieux sur firefox mais sur internet explorer 6, ce stupide navigateur me renvoie la valeur Em. Comment resoudre ce petit tracas ?

Merci !
jeudi 24 avril 2008 à 09:53:28 | Re : Recuperer un style em en javascript

bultez

Membre Club

Bonjour,

    je ne vois pas en quoi ce peut-être stupide de renvoyer "3em",
       lorsque c'est ce qu'on écrit dans l'attribut ???
    je dirais même que c'est tout à fait normal, légitime, correct...
       et tout et tout...

    en tout cas c'est ce que fait IE et ça ne me semble pas être une absurdité,
FF lui retourne effectivement cette valeur transformée, et sans porter
aucun jugement sur ce superbe navigateur, je préfère le comportement
de IE...
au moins sur sur ce coup là ! car ce peut-être disons... génant.

    en simplifiant l'exemple fourni :

<body>
<div id="test" style="width:3em">toto</div>
<script type="text/javascript">
    var d=document.getElementById("test");
    alert(  d.style.width    +"\n"+
            d.clientWidth
         );
    var ie = false;    /*@cc_on    ie = true;    @*/
    if ( !ie )
            alert( window.getComputedStyle(d,null).width );
    else    alert( d.currentStyle.width )
</script>
</body>

Cordialement.
jeudi 24 avril 2008 à 18:25:59 | Re : Recuperer un style em en javascript

PetoleTeam

Membre Club
Bonjour à tous,
mais sur internet explorer 6, ce stupide navigateur me renvoie la valeur Em
il est vrai que ce commentaire est de trop attendu que seul IE, sur ce coup, répond à se qu'on lui demande.

Le fait que mettre la largeur en em présente l'avantage d'avoir le même comportement sur les différents navigateurs l'orsque l'on augmente la taille de la font du DIV

Longueur en em entraîne quelle est relative à la taille de caractère employée par l'élément conteneur.
exemple 1.5em = 150% de la taille de caractère définie par l'élément parent.

Mais je m'égare me semble t-il...

Pour connaître la taille en pixel des éléments il y a les incontournables offsetWidth et offsetHeight.
exemple :
  var O_Div = document.getElementById("D_TEST");
  var Larg = O_Div.offsetWidth;
  var Haut = O_Div.offsetHeight;
  alert( "offset : \nLargeur = " +Larg +"\nHauteur = " +Haut);


ou encore clientWidth et clientHeight.
exemple :
  var O_Div = document.getElementById("D_TEST");
  var Larg = O_Div.clientWidth;
  var Haut = O_Div.clientHeight;
  alert( "client : \nLargeur = " +Larg +"\nHauteur = " +Haut);


...mais gare à la prise en compte des bordures différentes suivant les navigateurs, beaucoup de polémique à ce sujet d'ailleurs et d'ici.

Pour en revenir à mon égarement du début juste un petit code pour test
<html>
<head>
<script type="text/javascript">
function Show_Info( id_){
  var O_Div = document.getElementById( id_);
  var Larg = O_Div.offsetWidth;
  var Haut = O_Div.offsetHeight;
  alert( "offset : \nLargeur = " +Larg +"\nHauteur = " +Haut);
  var Larg = O_Div.clientWidth;
  var Haut = O_Div.clientHeight;
  alert( "client : \nLargeur = " +Larg +"\nHauteur = " +Haut);
}
</script>
</head>
<body>
<div id = "D_TEST" style = "width:3.0em; font-size:20px; border:1px solid red;">Texte</div>
<input type = "button" value="UP Font" onclick = "document.getElementById('D_TEST').style.fontSize='40px';"><br>
<input type = "button" value="Show" onclick = "Show_Info('D_TEST');">
</body>
</html>

encore un test juste pour le FUN, mettez un texte avec des espaces dans le DIV.

;O)


Cette discussion est classée dans : document, em, strvalue, strcssrule, oelm


Répondre à ce message

Sujets en rapport avec ce message

Compatibilite [ par JB ] A grand dieu pardonnez moi de mon ignorance ! Plus serieusement, je suisdebutant programmeur (etudiant en BTS d'info, je n'avais que quelques basesde Récupérer l'adresse d'un document [ par Kariboo ] Comment récupérer l'adresse du document présent dans la fenêtre principale en exécutant un script EXTERIEUR: Il s'agit en fait d'un script présent dan Capturer la sélection d'une liste Box [ par OlivierR ] Bonjour tout le monde !Je suis débutant en JavaScript et je voudrais savoir comment capturer le choix de l'utilisateur d'une liste Box. Sa déclaration Aide a decrypté [ par Wab ] bonjour, quelqu'un peux m'aider a decrypté ca? :function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == - aide pour un jv-sc qui test des champs [ par Moussetique ] function VerifForm() { adresse = document.krucial.email.value; motdp = document.krucial.mdp.value; var place = adresse.indexOf("@",1); var point = adr de l aide please [ par ibompuis ] voila je souhaiterais afficher dans plusieurs tableaux des images que je pourrai recharger avec un boutonj ai trouve ce script mais je ne sais pas co Cases à cocher [ par lavache13 ] Je suis en train de faire un formulaire avec des cases à cocher et j'aimerai savoir ce que retourne une case à cocher comme valeur. J'ai essayé checke Je ne comprends pas [ par Robbie ] Salut, j'ai un formulaire dans ce formulaire j'ai une liste déroulante : avec function liste_changee(){ document.formulaire.metho JavaScript utilisée dans PHP [ par Chinatraveler ] BonjourDans une même page *.php mêlant PHP et javascript, je souhaite utiliser l'objet "document.referrer" dans une condition "if" PHP.Est-ce possible Passage de variable entre fenetres... [ par baddack ] J'ai deux fentres et je veux envoyer des infos de l'une a l'autre!!Par exemple si je click sur un lien de la fenetre1, appeler une fonction du genre :


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,250 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales