11550 sujets

JavaScript, DOM et API Web HTML5

Récuperer la largeur d'un div en Em , en Px

Bonjour,

j'aimerais récupérer 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 problème est que tout marche pour le mieux sur Firefox mais sur internet explorer 6, ce stupide navigateur me renvoie la valeur Em. Comment résoudre ce petit tracas ?

Merci ! Smiley biggrin
mathis94 a écrit :
Bonjour,

j'aimerais récupérer 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 problème est que tout marche pour le mieux sur Firefox mais sur internet explorer 6, ce stupide navigateur me renvoie la valeur Em. Comment résoudre ce petit tracas ?

Merci ! Smiley biggrin

Heu si tu mets une valeur en em, pc ou autre unité que px, je trouve plutôt normal que le navigateur te retourne une valeur en "em". Firefox lui convertit automatiquement tout en PX donc normal que lui te retourne le dawa en PX.

Si tu veux franchement récupérer la largeur d'un div, tu utiliser le offsetWidth et on en parle plus

elm.offsetWidth
Sujet clos
Aller à