Recuperer un style em en javascript

Signaler
Messages postés
368
Date d'inscription
vendredi 10 octobre 2003
Statut
Membre
Dernière intervention
14 mai 2010
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
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>

toto

<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>

</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 !

2 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
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 :



toto

<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>


Cordialement.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
14
Bonjour à tous,
<table bgcolor= "#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">----, mais sur internet explorer 6, ce stupide
navigateur me renvoie la valeur
Em</td>
</td></tr></tbody></table>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>


Texte







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

;O)