Recuperer un style em en javascript

cs_MATHIS49 Messages postés 368 Date d'inscription vendredi 10 octobre 2003 Statut Membre Dernière intervention 14 mai 2010 - 24 avril 2008 à 07:23
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 24 avril 2008 à 18:25
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

cs_bultez Messages postés 13616 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
24 avril 2008 à 09:53
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.
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 16
24 avril 2008 à 18:25
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)
0
Rejoignez-nous