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

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

Citation:

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

12/07/2008, 15h36	#2
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	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 __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email