questions sur cssRules ou rules

Version imprimable

06/06/2009, 18h12
casawi

questions sur cssRules ou rules

Salut tout le monde,
j'ai une question sur la fonction cssRules ou rules selon les navigateurs.
supposons que nous sommes sur Firefox.

Code:

var regles=document.styleSheets[0].cssRules

est ce que l'array retourné (regles) va représenter toutes les classes de la feuille de style attachée à la page selon l'ordre de son écriture ou quoi ?

Et merci
06/06/2009, 18h25
nod__

Oui, dans l'ordre, mais tout ce que le navigateur ne comprends pas n'est pas présent dans la liste des styles. Donc tu utilises des selecteurs un peu spéciaux dans une règle que IE6 ne comprends pas, tu ne pourras pas récupérer cette règle à partir de IE6.

C'est pas bien méchant, faut y faire gaffe quand même. La taille de ta collection varie suivant le navigateur ^^ .
06/06/2009, 21h39
casawi

Merci nod__ pour ta réponse,
A part l'ordre, y a il une méthode qui permet de récupérer les styles par leur nom.
je m'explique, dans ma feuille de style j'ai la classe cl1 pour les TR, comment je peux savoir que regles[i] correspond à cette classe ?
ET merci encore.
06/06/2009, 23h47
nod__

Comme d'habitude, FF et les autres ont une méthode tout faite pour faire ça directement, IE non. Donc on est obligé de passer toutes les règles en revue et de voir laquelle est la bonne.

Tu trouveras ton bonheur sur ce post : http://www.developpez.net/forums/d75...alises-classe/ Si c'est pas le cas, hésite pas a demander quelque chose de plus clair :)
07/06/2009, 10h43
SpaceFrog

je dois avoir ça au bureau, je regarde demain
07/06/2009, 22h50
casawi

Merci beacoup nod__ pour le lien.
je viens de trouvez un autre lien intéressent : http://www.javascriptkit.com/dhtmltu...rnalcss3.shtml.
Merci encore.

Un peu en retard on dirait mais voici ce que j'utilise pour récupérer les styles css:

Code:

1
2
3
4
5
var st=document.styleSheets[0];
var ru=st.rules?st.rules:st.cssRules;
var Classe=(ru[0].selectorText) //retourne le premier selecteur 
var Props= (ru[0].style.cssText) // retourne le contenu des {}
var TabProps=Props.split('\;')//retourne un tableau des propriétés et de leurs valeurs

a perfectionner maisla base est là

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
</style>
 
<script type='text/javascript'>
var st=document.styleSheets[0];
var ru=st.rules?st.rules:st.cssRules;
ruL=ru.length;
var TabSelector=new Array();
var CSSTab= new Array();
var regCss=/"(.[^"])"/g;
 
    for (i=0;i<ruL;i++){
	 TabSelector.push(ru[i].selectorText)
	 var LineProp=ru[i].style.cssText.replace(/(;$)/,'');
	 var LineProp=LineProp.split(';');
	 var LPL=LineProp.length; 
	  TabSelector[ru[i].selectorText]=new Array();
	  TabSelector[ru[i].selectorText]['PropName']=new Array();
	  TabSelector[ru[i].selectorText]['PropValue']=new Array();
 
 
 
	  for (j=0;j<LPL;j++){
	   tempo=LineProp[j].split(':');
   		TabSelector[ru[i].selectorText]['PropName'][j]=tempo[0];
   		TabSelector[ru[i].selectorText]['PropValue'][j]=tempo[1];
 
	  } 
	 } 
 
var affiche="";
TSL=TabSelector.length;
 
for (i=0;i<TSL;i++){
 
 
    affiche+=TabSelector[i]+"\n";
    PVL=TabSelector[TabSelector[i]]['PropName'].length;
 
    for (j=0;j<PVL;j++){
    	 affiche+="\t"+TabSelector[TabSelector[i]]['PropName'][j]+" => ";
	 	 affiche+="\t"+TabSelector[TabSelector[i]]['PropValue'][j]+"\n ";
     	}
 
  }
alert(affiche)
 
 
</script>