begin process at 2012 02 11 04:49:51
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Divers

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

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


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Niveau :Initié Date de création :13/07/2008 Vu / téléchargé :4 447 / 102

Auteur : FREMYCOMPANY

Ecrire un message privé
Site perso
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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

CRÉER UNE RÈGLE CSS POUR QU'ELLE S'APPLIQUE À UNE ÉLÉMENT DO...
AJAX INTER-SITE (CROSS-SITE) SOUS IE SANS TENIR COMPTE DES P...
Source avec une capture POURQUOI MES SCRIPTS AJOUTÉS DYNAMIQUEMENT (AJAX, XSLT, ...)...
Source avec Zip Source avec une capture DOCUMENT.SELECTION POUR FF (FIREFOX)

 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos

Commentaires et avis

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

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.

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 ;) )

Commentaire de XtremDuke le 17/07/2008 11:14:29

Source très intéressante. Bravo.

 Ajouter un commentaire




Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,858 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales