Obtenir le style CSS d'un objet

Version imprimable

Salut! ;)

Je cherche le moyen d'afficher à l'écran (avec alert), le style d'un objet dont les propriétés sont définies avec CSS... Dans le code suivant, le 1er div possède un style défini directement dans sa balise et là, aucun problème pour obtenir ses propriétés. Dans le 2ème div, il n'ya aucun style défini dans la balise, seulement le style CSS est bien appliqué à l'objet. Malgré tout, impossible d'obtenir l'affichage de ses propriétés... :(
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html> <head> <style> div { background-color:white;border:11px solid red; } </style> </head> <body> <div id="d1" style="border:10px solid lime;">1</div> <div id="d2">2</div> <script type="text/javascript">  </script> </body> </html>
[EDIT]
J'ai essayé avec getAttribute(), mais la valeur renvoyé est une chaine vide... :(

Code:

alert(document.getElementById('d2').style.getAttribute('border',''));

Merci d'avance pour votre aide.

11/08/2005, 19h36
javatwister

salut

pour Ffx:

Code:

valeur=window.getComputedStyle(élément_cible, pseudo_élément css ou null).propriété_recherchée;

pour IE:

Code:

valeur=élément_cible.currentStyle.propriété_recherchée;

fastidieux, isn't it? :mrgreen:
11/08/2005, 19h54
Sub0

http://sub0.developpez.com/merci.png
13/08/2005, 14h15
Sub0

Salut!

Citation:

Envoyé par javatwister

fastidieux, isn't it? :mrgreen:

En effet !! :!:

Dans mon programme, j'ai besoin de savoir si le webmaster a définit ou non un style CSS pour un type d'objet (TD & TABLE). Le problème avec currentStyle, c'est qu'il me retourne les valeurs par défaut si le style n'est pas définit... Il me retourne également les valeurs du style défini directement dans les balises, mais ça ne me dérange pas trop car là je sais comment le détecter. Par contre, comment faire pour savoir ce qu'il ya entre les balises <style> et </style> sans le confondre avec les valeurs par défaut ?

En résumé, que je ne mette rien dans les balises <style></style>, ou que je déclare un style, je n'arrive pas à savoir si le webmaster à définit un style ou non pour ce type d'objet...

Autre question : Existe-t-il un moyen d'obtenir la valeur en pixel des épaisseurs thin, medium et thick svp ?

Merci d'avance pour votre aide. ;)

Apparemment, j'ai trouvé une solution qui fonctionne mais je ne vous raconte pas le bricolage que c'est !!
Il s'agit de comparer chaque propriétés à celles de l'objet document.body (en admettant que cet objet me retourne bien les propriétés de style par défaut).

Dans ce cas précis, j'ai besoin de savoir si la bordure d'un objet est celle par défaut ou non :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function IsMyBorder(d){
  var def_b,def_s=null,db=document.body;
 
  if(d.currentStyle)
    def_b=d.currentStyle.borderLeftWidth+
      d.currentStyle.borderTopWidth+
      d.currentStyle.borderRightWidth+
      d.currentStyle.borderBottomWidth+
      d.currentStyle.borderStyle;
  else
    def_b=window.getComputedStyle(d,null).getPropertyValue('border-left-width')+
      window.getComputedStyle(d,null).getPropertyValue('border-top-width')+
      window.getComputedStyle(d,null).getPropertyValue('border-right-width')+
      window.getComputedStyle(d,null).getPropertyValue('border-bottom-width')+
      window.getComputedStyle(d,null).getPropertyValue('border-style');
 
  if(db.currentStyle)
    def_s=db.currentStyle.borderLeftWidth+
      db.currentStyle.borderTopWidth+
      db.currentStyle.borderRightWidth+
      db.currentStyle.borderBottomWidth+
      db.currentStyle.borderStyle;
  else
    def_s=window.getComputedStyle(db,null).getPropertyValue('border-left-width')+
      window.getComputedStyle(db,null).getPropertyValue('border-top-width')+
      window.getComputedStyle(db,null).getPropertyValue('border-right-width')+
      window.getComputedStyle(db,null).getPropertyValue('border-bottom-width')+
      window.getComputedStyle(db,null).getPropertyValue('border-style');
 
  return (def_b!=def_s);
}

Le hic c'est que document.body me retourne la couleur #000000 pour le cadre et que par défaut, la couleur du cadre est #cdcdcd...

Entre nous, j'espère que vous avez une meilleure solution à me proposer...