[SRC][STYLE]Récupérer le style actuel d'un objet !

**SpaceFrog** · 11/07/2008, 16h53

Pour recupérer le style courant ou par defaut des objets, c'est toujours la galère...

Pour la largeur ou hauteur on peut utiliser offsetWidth ou offsetHeight.

Voici un petit script Pour IE et FFX qui permet de recupérer toute propriété de style des objets, y compris les propriétés par défaut lorsque non définies dans le css ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type='text/javascript'>
function OffsetStyle(Obj,Prop)
{
    var x = Obj;
    if (x.currentStyle){var y = x.currentStyle[Prop];}
    else if (window.getComputedStyle){    var y = window.getComputedStyle(x,null)[Prop];}
    return y;
}
</script>
<body>
<input type="button" onclick="alert(OffsetStyle(document.body,'fontSize'))" value='size' />
 
</body>
 
</html>

ATTENTION:
IE retourne par defaut les unités en pts pour les fontsize par exmple
FFX retourne des px

si l'on attribue de em :
IE retourne la valeur des EM
FFX convertit en px ...

si l'on mets un background-color red
IE retourne red
FFX rgb(255,0,0)

etc

**FremyCompany** · 12/07/2008, 15h36

De manière générale :
- IE retourne la règle CSS qui l'a emportée sur toutes les autres (currentStyle)
- FireFox retourne la valeur convertie (computedStyle)

Il serait peut-être possible de faire un convertissseur qui transformerait tout selon ce que demande le W3C pour le computedStyle.

Tentative de standardisation (CSS 3) :
http://dev.w3.org/csswg/cssom/#elementcssinlinestyle

**FremyCompany** · 13/07/2008, 11h52

Envoyé par FremyCompany

Lorsque vous souhaiter connaitre la valeur calculée d'une propriété CSS, vous utilisez window.getComputedStyle(element).propName sous FireFox et co et element.currentStyle.propName sous IE.

Seulement voilà, alors qu'IE retourne les valeurs tels que vous les avez tapées, FireFox les convertit en pixels, ce qui semble demandé pour getComputedStyle par W3C.

J'ai alors créé une nouvelle méthode javascript, getComputedCSSValue, qui mets tout le monde d'accord et transforme les valeurs en em, %, pc, pt, ex, cm, in, mm, ... en pixels sous IE. Il transforme aussi les noms de couleurs en leur valeur réel (red ==> #FF0000).

Ne vous étonnez pas si il y a toujours des différences entre IE et FireFox, j'ai suivi un modèle plus proche de celui d'Opéra, qui semble plus proche des standards sur ce domaine que FireFox.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<utitilsation du code dans le ZIP>
div { font-size: 10px; }
div > span { font-size: 150%; width: 1em; border: 0.5ex blue solid; }
getComuptedCSSValue(theSpan, "width") ==> "15px"
getComuptedCSSValue(theSpan, "border") ==> "4px solid #0000FF"
...

[SRC][STYLE]Récupérer le style actuel d'un objet ! [JavaScript]

Contribuez

Discussions similaires

Partager

Partager