Comment modifier une rule de class CSS en javascript ?

**Maljuna Kris** · 01/02/2009, 08h20

Saluton,
Ce que je cherche � faire me para�t simple, voire naturel, et cependant �a ne semble pas une pratique courante.
J'ai des lignes de tableau html <tr> qui sont d�clar�es comme rattach�es � l'une ou l'autre des class[es] CSS .soir ou .midi
Dans la feuille de style

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

.soir {display : none}

J'ai sur ma page deux boutons radio

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
            <input type="radio" onchange="swapMS();" checked="checked" name="MidiSoir" value="midi"/>
            MIDI&nbsp;&nbsp;||&nbsp;&nbsp;SOIR
            <input type="radio" onchange="swapMS();" name="MidiSoir" value="soir"/>

Dans la fonction javascript swapMS(), je souhaiterais qu'en fonction de la valeur de la rule display de la class .midi celle-ci passe � 'none' et celle de .soir � 'table' et inversement.
Mais je ne trouve pas comment acc�der aux rules d'une class en javascript.
Comment feriez-vous ?
Merci.

**kabkab** · 01/02/2009, 09h40

Bonjour,
Je ne sais pas si �a peux t'aider.

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
 
<head>
<style type="text/css">
<!--
.midi {
	background-color: #00FF66;
}
.soir {
	background-color: #0066CC;
}
-->
</style>
<script type="text/JavaScript">
<!--
 
function swap()
{
var ancien=document.getElementById("latr1").className;
if (ancien=='midi') {nouveau='soir';} else {nouveau='midi';}
document.getElementById("latr1").className=nouveau;
}
//-->
</script>
</head>
 
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr id="latr1" class="midi">
    <td>a1</td>
  </tr>
  <tr class="soir">
    <td>a2</td>
  </tr>
  <tr>
    <td>a3</td>
  </tr>
</table>
 
<input name="leboutton" type="button" value="boton" onClick="swap();">

Tu aurais compris que le but est de jouer sur className.

**Maljuna Kris** · 01/02/2009, 09h53

Merci,
Je demeure surpris qu'on en revienne toujours aux m�mes types de solutions, changer la class des �lements plut�t que modifier la r�gle d'une classe.
En l'occurence j'ai 15 lignes de class .matin et 15 lignes de class .soir

Donc au lieu de modifier deux r�gles de class il faut modifier 30 className d'�l�ments.
Je ne trouve pas �a tr�s optimis�.
Mais, s'il n'y a pas mieux, je ferais avec, sauf qu'un id doit �tre unique alors que l� j'ai 30 �l�ments � modifier.

**SpaceFrog** · 01/02/2009, 10h03

trois possibilit�s en fait :

* soit comme propos� ci dessus tu poss�des deux class et tu faire le swap des classNames,
* soit tu attaque directement la propri�t� du style en question:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

obj.style.display="none"

* soit tu modifies le css lui m�me et attaquant par les rules :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

crossRules= (document.styleSheets[0].cssRules)?document.styleSheets[0].cssRules:document.styleSheets[0].rules

et ensuite tu scannes la collection crossRules pour modifier le selectorText voulu

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
 
if(crossRules[i].selectorText.toLowerCase()=="div"){ //là tu as trouvé la class des divs

**Maljuna Kris** · 01/02/2009, 15h18

Bon, tout d'abord, merci de vos contributions.
Finalement voici ce que j'ai fait.
La partie de la feuille de style concern�e est devenue:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
#soir tr{display:none;}
#midi tr {display:table-row;}

En effet, j'ai eu besoin d'affecter mes <tr> � d'autres classes (.entrees .plats et .desserts).
Et le javscript

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
function swapMS(){
    crossRules= (document.styleSheets[0].cssRules)?document.styleSheets[0].cssRules:document.styleSheets[0].rules;
    var i = 0;
    while(crossRules[i]){
        if((crossRules[i].selectorText=='#soir tr') || (crossRules[i].selectorText=='#midi tr')){
            if(crossRules[i].style.display=='none'){crossRules[i].style.display='table-row';}
            else{crossRules[i].style.display='none';}
            }
        i++;
        }
    }

C'est assez ballot de devoir parcourir toute la liste des r�gles de la feuille de style pour n'en affecter que 2, mais, faute d'une fonction getRuleBySelectorText, je ne vois pas comment optimiser.
Encore merci.

Comment modifier une rule de class CSS en javascript ?

JavaScript

Discussions similaires

Partager

Partager