Parcourir les styles définis

Résolu
Signaler
Messages postés
144
Date d'inscription
lundi 13 octobre 2003
Statut
Membre
Dernière intervention
21 décembre 2014
-
Messages postés
144
Date d'inscription
lundi 13 octobre 2003
Statut
Membre
Dernière intervention
21 décembre 2014
-
bonjour !

J'ai créé une feuille de style CSS attaché à toutes les pages de mon site, ça marche bien merci :)

Je voudrais retrouver les définitions de ces styles dans les objets du
javascript mais j'arrive pas. Existe-t-il une syntaxe de type For ...
in ... pour parcourir tous les styles existants et avoir leurs
propriétés?



merci

2 réponses

Messages postés
289
Date d'inscription
vendredi 11 mars 2005
Statut
Membre
Dernière intervention
3 avril 2008
4
Salut!

Avec document.styleSheets, il est possible d'extraire tous les feuilles de style sur ta page et leurs propriétés et également de les modifier.

J'ai fait un petit script dernièrement qui permet celà. Ça va te donner une bonne exemple d'utilisation.

<script type="text/javascript">
function changeAttributClass(nomDeLaClass, nomAttribut, valeurAttribut) {
if (document.styleSheets && document.styleSheets.length>0)
if (document.styleSheets[0].cssRules)
rules = "cssRules";
else
if (document.styleSheets[0].rules)
rules = "rules";
else return;
for (var i=0;i<document.styleSheets.length;i++) {
cssListe = eval("document.styleSheets[i]."+rules);
for (var no=0;no<cssListe.length;no++)
if (cssListe[no].selectorText == nomDeLaClass)
cssListe[no].style[nomAttribut] = valeurAttribut;
}
}
</script>

A+, Ghislain
Messages postés
144
Date d'inscription
lundi 13 octobre 2003
Statut
Membre
Dernière intervention
21 décembre 2014

Merci beaucoup Ghislain, ça me convient parfaitement!
Grace à ta boucle je peux faire la liste de tous les styles dans une liste déroulante :

<select name="MonStyle" onchange="javascript:chgstyle(this.value);">
<script type="text/javascript">
if (document.styleSheets && document.styleSheets.length>0)
if (document.styleSheets[0].cssRules)
rules = "cssRules";
else
if (document.styleSheets[0].rules)
rules = "rules";

for (var i=0;i<document.styleSheets.length;i++) {
cssListe = eval("document.styleSheets[i]."+rules);
for (var no=0;no<cssListe.length;no++)
document.writeln("<option value=""+cssListe[no].selectorText+"">"+cssListe[no].selectorText);
}
</script></select>