Comment modifier une rule de class CSS en javascript ?

Version imprimable

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:

.soir {display : none}

J'ai sur ma page deux boutons radio
Code:

1 2 3 <input type="radio" onchange="swapMS();" checked="checked" name="MidiSoir" value="midi"/> MIDI  ||  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.

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

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

01/02/2009, 09h53
Maljuna Kris

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.
01/02/2009, 10h03
SpaceFrog
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:

obj.style.display="none"

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

Code:

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:

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

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:

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:

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.