Getcomputedstyle pour ie (getcomputedcssvalue) [pt to px, em to px, cm to px, ...]

Soyez le premier à donner votre avis sur cette source.

Vue 6 204 fois - Téléchargée 205 fois

Description

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.

Source / Exemple :


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

Conclusion :


Ce code peut encore évoluer mais il me semble déjà très prometteur.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_Kimjoa
Messages postés
264
Date d'inscription
vendredi 6 mai 2005
Statut
Membre
Dernière intervention
19 septembre 2014
-
Salut , tout script est vraiment très intéressant et devrait même pouvoir s'intégrer au prototype que l'on connais tous. J'ai juste une question qui me trotte, est-ce-que ce serait possible de faire l'inverse, c-a-d que ff retourne les valeurs écrite dans les css , sans les transformer.
Je me suis souvent cassé les dents sans trouver de solution , pour les propriété height et width , ce qui est sur est que ie fusionne les marges, je pense qu'il encore a faire de ce coté mais a part ca , c'est vraiment pratique .
10/10 pour les recherche effectuer , la qualité du code malgrès que je n'ais pas approfondit , ca me semble très bien ,bye!!
FREMYCOMPANY
Messages postés
278
Date d'inscription
jeudi 12 janvier 2006
Statut
Membre
Dernière intervention
22 décembre 2008
-
Merci pour le commentaire !

Pour ce qui est de faire l'inverse (currentStyle pour FireFox), je pense que c'est encore plus compliqué dans la mesure où il faut parser toutes les règles CSS à la main (contrairement à IE8, FireFox 3 ne gère pas encore querySelector[All]), puis trouver la plus valable.

Je vais tout de même essayer de voir ce que je peux faire, et si j'arrive à un résultat un de ces jours, je le posterai ici.
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2 -
spaffy va peut-être faire justement la méthode calculant les pixel en em et vice versa :)
( a très vite fremy ;) )
XtremDuke
Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3 -
Source très intéressante. Bravo.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.