begin process at 2010 03 21 06:58:45
  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é :2 754 / 88

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

Source avec Zip Source avec une capture SÉQUENCEUR par jdmcreator
Source avec Zip COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36
Source avec Zip VIRTUAL IPHONE (V.2) par loicseg
Source avec Zip MOOTABLEAU par Miky76
Source avec Zip CALCULER VOTRE IMC par lesnouesremy

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

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

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,406 sec (3)

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