Discussion :

[domi65]

Bonjour. l'interface "style" d'un élément HTML ne donne accès qu'aux règles données directement dans l'élément.
Comment connaître la valeur d'une propriété donnée en dehors de la balise, et ce sans même savoir d'ou elle vient ? Si le navigateur la connait, JS doit bien pouvoir y accéder...

Merci.

[danielhagnoul]

window.getComputedStyle : https://developer.mozilla.org/fr/doc...tComputedStyle

[domi65]

Merci Daniel.

J'avais bien trouvé une méthode se rapportant aux éléments dans la doc Mozilla, mais très peu compatible. Je n'aurais jamais pensé à aller chercher une méthode de Window pour obtenir des infos sur un élément. Mais pourquoi pas !

Ceci dit, les résultats ne sont pas forcément facile à utiliser ! Si je pose :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
p {color: green; font-weight: bold}
<p>paragraphe</p>

et que j'essaie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
p = document.getElementsByTagName('p')[0];
couleur = window.getComputedStyle(p,null).getPropertyValue('color');
graisse= window.getComputedStyle(p,null).getPropertyValue('font-weight');
police = window.getComputedStyle(p,null).getPropertyValue('font-family');

J'obtiens avec Firefox ou IE:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
couleur = rgb(0, 128, 0)
graisse = 400

Mais Chrome et opéra me donnent pour la graisse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

graisse = normal

Je sens qu'il va falloir jongler !
Heureusement, dans la grosse majorité des cas, on peut se débrouiller en se rapportant aux classes !

[joel.drigo]

Salut,

Avec jQuery, .css(), attribut cssText pour avoir l'ensemble des attributs.