Discussion :

[titoumimi]

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

beaucoup d'avance

PB

[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+

[titoumimi]

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

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

beaucoup

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

[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

[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)

[titoumimi]

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

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

[FremyCompany]

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 :

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
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);
}

[titoumimi]

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

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

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

[FremyCompany]

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 :

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
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);
}

[FremyCompany]

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 :

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

[titoumimi]

un énorme merci, je me colle dessus

[E.Bzz]

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

A+

[FremyCompany]

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

[EDIT]Code mis à jour