Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

GETCOMPUTEDSTYLE POUR IE (GETCOMPUTEDCSSVALUE) [PT TO PX, EM TO PX, CM TO PX, ...]


Information sur la source

Catégorie :Divers Niveau : Initié Date de création : 13/07/2008 Vu / téléchargé: 1 546 / 53

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

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

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

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de Kimjoa le 13/07/2008 17:04:27 10/10

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!!

signaler à un administrateur
Commentaire de FREMYCOMPANY le 13/07/2008 18:47:07

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.

signaler à un administrateur
Commentaire de mickaelpfr le 17/07/2008 09:33:25

spaffy va peut-être faire justement la méthode calculant les pixel en em et vice versa :)
( a très vite  fremy ;) )

signaler à un administrateur
Commentaire de XtremDuke le 17/07/2008 11:14:29

Source très intéressante. Bravo.

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Appels d'offres



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,250 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.