Obtenir le style CSS d'un objet

**Sub0** · 11/08/2005, 19h13

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 :

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

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">
<!--
  alert(document.getElementById('d1').style.border);
  alert(document.getElementById('d2').style.border);
//-->
</script>
 
</body>
</html>

[EDIT]
J'ai essayé avec getAttribute(), mais la valeur renvoyé est une chaine vide...

Code :

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

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

Merci d'avance pour votre aide.

**javatwister** · 11/08/2005, 19h36

salut

pour Ffx:

Code :

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

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

pour IE:

Code :

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

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

fastidieux, isn't it?

**Sub0** · 11/08/2005, 19h54

**Sub0** · 13/08/2005, 14h15

Salut!

Envoyé par javatwister

fastidieux, isn't it?

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.

**Sub0** · 13/08/2005, 15h46

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 :

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

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

Obtenir le style CSS d'un objet

JavaScript

Discussions similaires

Partager

Partager