[DOM] Récupérer les attributs d'une classe CSS ?

Version imprimable

09/07/2007, 12h24
titoumimi

[DOM] Récupérer les attributs d'une classe CSS ?

Bonjour à tous.

Je cherche à créer une fonction javascript à laquelle je passerai un nom de classe CSS, et qui se chargerait de me stoquer dans un tableau les différentes propriétés ainsi que la valeur associée de cette classe.

Savez-vous si une telle chose est possible SVP ? Avez-vous des pistes ? Je doit vous avouer que javascript n'est pas du tout mon domaine, et que je patauge un peu...

:merci: beaucoup d'avance

PB
09/07/2007, 18h45
E.Bzz

Bonjour,
il me semble que JS ne sait récupérer les CSS que dans la mesure où ils ont été appliqués à un élément (ne sait en fait que récupérer les caractéristiques d'un élément).
Cela reviendrait à appliquer ta class à l'élément, puis en récupérer les caractéristiques au sens CSS.
Mais attention, JS ne saura pas (toujours à ma connaissance) faire la différence entre les prop CSS issues de la class que tu viens de lui appliquer, et celles qu'il a hérité de ces éléments parents, par exemple ...

A+
09/07/2007, 21h11
titoumimi

Bon, pas de bol, j'espérait que ce serait possible...

Tant pis, je vais aller parser mes feuilles de styl coté serveur...

:merci: beaucoup
10/07/2007, 03h29
Hibou57

Hé là! ... pas si vite,

Si tu es sous Internet Explorer, tu peux accéder au feuilles de style via document.styleSheets (attention, au « s »). Cette propriété de l'objet document, est une collection (une liste, au sens de MS) des feuilles de style chargées avec la page (cette collection comprend également les feuilles de styles éventuellement créées dynamiquement).

Puisque tu demandais une piste, et non pas qu'on le fasse à ta place :king: je te renvoie donc au SDK ou à MSDN pour consulter la documentation relative au DOM HTML d'Internet Explorer, et en apprendre plus sur la propriété styleSheets ;)

Bese7atek :D
10/07/2007, 09h21
titoumimi

Merci beaucoup de cette réponse, mais une solution purement IE ne va pas convenir dans le cas présent, je ne contrôle pas la config de mes utilisateurs ;)

Donc je vais me retourner vers le coté serveur, tant pis ;)

:merci:
10/07/2007, 09h30
FremyCompany

Si tu veux, je peux te fournir un work-around...
Bon ce n'est qu'un work-around, j'en conviens, mais ca marcheras sur IE et FF au moins.

La je dois y aller, je reviens cet aprèm, si ca t'intéresse, tu me dis, je le code (là c'est juste une idée)
10/07/2007, 09h39
titoumimi

c'est extrêmement gentil de ta part, mais je ne veux pas abuser non plus, je fait un peu mon boulet là :oops:

Je pense qu'une solution coté serveur serait plus fiable non ? puisque je pourrai attaquer directement mes classes CSS, et donc je n'aurai pas les propriétés héritées...

Euh, comme tu veux mais bon coté serveur je vois pas comment tu vas faire pour analyser ton CSS ;)

Sinon, voila, j'ai trouvé un peu de tmps, je vais faire un premier brouillon :

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
function getStyle(el) {
  return (
    el.runtimeStyle ? el.runtimeStyle : (
      el.currentStyle ? el.currentStyle : (
        el.getComputedStyle()
      )
    )
  );
}
function cssDiff(el1, el2) {
  var s1, s2; s1=getStyle(el1); s2=getStyle(el2);
  var s3 = new Object();
  for (key in s1) {
    if (s1[key] != s2[key]) {
      s3[key] = s2[key];
    }
  }
}
function getCSSClass(className) {
   var el1 = document.createElement("a");
   var el2 = document.createElement("a");
   el2.className=className;
   return cssDiff(el1, el2);
}

Citation:

Envoyé par FremyCompany

Euh, comme tu veux mais bon coté serveur je vois pas comment tu vas faire pour analyser ton CSS ;)

bah en lui passant le nom de ma classe, je vais pouvoir parser mes CSS présents sur le serveur, et récupérer mes infos ;)
Citation:
Envoyé par FremyCompany
Sinon, voila, j'ai trouvé un peu de tmps, je vais faire un premier brouillon :
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 function getStyle(el) { return ( el.runtimeStyle ? el.runtimeStyle : ( el.currentStyle ? el.currentStyle : ( el.getComputedStyle() ) ) ); } function cssDiff(el1, el2) { var s1, s2; s1=getStyle(el1); s2=getStyle(el2); var s3 = new Object(); for (key in s1) { if (s1[key] != s2[key]) { s3[key] = s2[key]; } } } function getCSSClass(className) { var el1 = document.createElement("a"); var el2 = document.createElement("a"); el2.className=className; return cssDiff(el1, el2); }
Merci beaucoup, je finit de me battre avec un autre soucis, et je regarde ça de près ;)

Vraiment désolé, j'ai retravaillé ce code de toutes les manières qui soit, je n'arrive à rien avec Internet Explorer...

Côté théorique, tout devrait marcher, mais seul FF me renvoie un résultat...

Je vais aller quérir de l'aide auprès de plus agueri que moi (mais je sais pas si cette personne aura le temps de se pencher sur le problème)

Le code actulel est :

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
32
33
34
35
36
document.cssProp = ['background','backgroundAttachment','backgroundColor','backgroundImage','backgroundPosition','backgroundRepeat','border','borderBottom','borderBottomColor','borderBottomStyle','borderBottomWidth','borderCollapse','borderColor','borderLeft','borderLeftColor','borderLeftStyle','borderLeftWidth','borderRight','borderRightColor','borderRightStyle','borderRightWidth','borderSpacing','borderStyle','borderTop','borderTopColor','borderTopStyle','borderTopWidth','borderWidth','bottom','captionSide','clear','clip','color','content','counterIncrement','counterReset','cssFloat','cursor','direction','display','emptyCells','float','font','fontFamily','fontSize','fontStyle','fontVariant','fontWeight','height','left','letterSpacing','lineHeight','listStyle','listStyleImage','listStylePosition','listStyleType','margin','marginBottom','marginLeft','marginRight','marginTop','maxHeight','maxWidth','minHeight','minWidth','orphans','outline','outlineColor','outlineStyle','outlineWidth','overflow','padding','paddingBottom','paddingLeft','paddingRight','paddingTop','pageBreakAfter','pageBreakBefore','pageBreakInside','position','quotes','right','styleFloat','tableLayout','textAlign','textDecoration','textIndent','textTransform','top','unicodeBidi','verticalAlign','visibility','whiteSpace','widows','width','wordSpacing','zIndex']
 
function getStyle(el) {
  return (
    el.currentStyle ? el.currentSyle: (
      el.runtimeStyle ? el.runtimeStyle : (
        getComputedStyle(el, true)
      )
    )
  );
}
function cssDiff(el1, el2) {
  var s1, s2; s1=getStyle(el1); s2=getStyle(el2);
  var s3 = new Object();
  for (var j=0; j<document.cssProp.length;++j) {
    if (s2[document.cssProp[j]] != s1[document.cssProp[j]]) {
      s3[document.cssProp[j]] = s2[document.cssProp[j]];
    }
  }
  return s3;
}
function getCSS(className) {
   var el1 = document.createElement("div");
   var el2 = document.createElement("div");
   el2.className = className;
   return cssDiff(el1, el2);
}
 
window.onload = function() {
  var s = getCSS("testClass");
  var msg = "";
  for (key in s) {
    msg+=key + " : " + s[key] + "\n";
  }
  alert(msg);
}

Ca y est, j'ai trouvé !

En fait, IE prend son temps pour calculer le style, il faut donc attendre qu'il le fasse avant de continuer les opérations.

Regarde bien comme je l'utilise avec onload ;)

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
        document.cssProp = ['background','backgroundAttachment','backgroundColor','backgroundImage','backgroundPosition','backgroundRepeat','border','borderBottom','borderBottomColor','borderBottomStyle','borderBottomWidth','borderCollapse','borderColor','borderLeft','borderLeftColor','borderLeftStyle','borderLeftWidth','borderRight','borderRightColor','borderRightStyle','borderRightWidth','borderSpacing','borderStyle','borderTop','borderTopColor','borderTopStyle','borderTopWidth','borderWidth','bottom','captionSide','clear','clip','color','content','counterIncrement','counterReset','cssFloat','cursor','direction','display','emptyCells','float','font','fontFamily','fontSize','fontStyle','fontVariant','fontWeight','height','left','letterSpacing','lineHeight','listStyle','listStyleImage','listStylePosition','listStyleType','margin','marginBottom','marginLeft','marginRight','marginTop','maxHeight','maxWidth','minHeight','minWidth','orphans','outline','outlineColor','outlineStyle','outlineWidth','overflow','padding','paddingBottom','paddingLeft','paddingRight','paddingTop','pageBreakAfter','pageBreakBefore','pageBreakInside','position','quotes','right','styleFloat','tableLayout','textAlign','textDecoration','textIndent','textTransform','top','unicodeBidi','verticalAlign','visibility','whiteSpace','widows','width','wordSpacing','zIndex']
 
        function getStyle(el) {
          try { window.recalc(); } catch (ex) {}
          return (
            el.currentStyle ? el.currentSyle : (
              el.runtimeStyle ? el.runtimeStyle : (
                document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(el, null) : (
                  getComputedStyle(el, null)
                )
              )
            )
          );
        }
        function cssDiff(el1, el2) {
          var s1, s2; 
          if (!document.all) {
            s1=getStyle(el1); s2=getStyle(el2);
          } else {
            s1=el1.currentStyle;
            s2=el2.currentStyle;
          }
          var s3 = new Object();
          for (var j=0; j<document.cssProp.length; j++) {
            if (s2[document.cssProp[j]] != s1[document.cssProp[j]]) {
              s3[document.cssProp[j]] = s2[document.cssProp[j]];
            }
          }
          return s3;
        }
        function getCSS(className, callBack) {
            var el1 = document.createElement("div");
            var el2 = document.createElement("div");
            document.body.appendChild(el1);
            document.body.appendChild(el2);
            el2.className = className;
            var wait;
            wait = function () {
                if (document.all && (!el1.currentStyle || !el2.currentStyle)) {
                    setTimeout(wait, 10);
                    return null;
                } else {
                    var s = cssDiff(el1, el2);
                    document.body.removeChild(el1);
                    document.body.removeChild(el2);
                    callBack(s);
                }
            }
            setTimeout(wait, 10)
            return true;
        }
 
        window.onload = function() {
            getCSS("testClass", function(s) {
                var msg = "";
                for (key in s) {
                    msg+=key + " : " + s[key] + "; \n";
                }
                alert(msg);
            });
        }

Le meilleur résultat est donné par IE qui n'interprête pas les style (les autres changent les noms de couleurs en #xxyyzz ou en rgb(xx, yy, zz)

10/07/2007, 13h31
titoumimi

:hola: un énorme merci, je me colle dessus :hola:
10/07/2007, 14h01
E.Bzz

... heu ... ben merci aussi : ma "connaissance" sur le sujet a bien évolué :king:

A+
10/07/2007, 14h33
FremyCompany

Juste une petite modification de routine :
--> J'avais oublié un removeChild ;)

[EDIT]Code mis à jour