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