Discussion :

[scrouet]

Bonjour.

Est-il possible de changer le style d'une classe CSS en Javascript et si oui comment ?
Je précise qu'il s'agit de changer le style d'une ou plusieurs classes seulement, pas de changer toute la feuille de style (si possible).

[jak0]

Tu veux modifier le style appliqué à un élément, ou à tous les éléments ayant la même classe CSS ?
Les seules choses que je connait dans ce domaine sont
document.getElementById(..).style.xxx (par exemple, width, border, etc...) = yyy;
et document.getElementById(...).className = yyy

[scrouet]

Oui, je connais aussi, mais sauf à faire une boucle ou équivalent, ça ne marche que sur un élément.
Ce que je souhaite, c'est bien changer le style de la classe de façon à ce qu'il soit répercuté sur tous les élements de la feuille relevant de la classe.

[Bovino]

Tu peux utiliser les propriétés

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
document.styleSheets[i].cssRules[j]    //FF
document.styleSheets[i].rules[j]    //IE Win

sur les règles j de la feuille de style i.

[scrouet]

N'étant pas à l'aise avec la solution de Bovino, je reviens sur le sujet pour préciser mon besoin.
Je souhaite que des portions de ma page Web changent selon que JS est activé ou pas. J'ai donc encadré dans des blocs les portions en question, avec une classe "avec_JS" si le bloc est à afficher quand JS est activé, "sans_JS" dans le cas inverse. Par défaut les blocs "avec_JS" sont masqués :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<style type="text/css">
<!--
*.avec_JS {display:none}
*.sans_JS {display:block}
-->
</style>

Comment faire pour masquer les blocs "sans_JS" et afficher les blocs "avec_JS" lorsque JS est activé ? Sachant que "bloc" peut être n'importe quel élément HTML (div, span, img...).

[SpaceFrog]

autant voir une seconde classe et modifier le className

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.red {color:red;}
.blue{color:blue;}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div class="red" onclick="this.className='blue';"> cliquez ici</div>