Changement du style d'une classe CSS en javascript

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

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

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.

Tu peux utiliser les propriétés

Code:

---

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.

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:

---

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

autant voir une seconde classe et modifier le className

Code:

---

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

---

Code:

---

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

---

Sauf que le changement de classe doit se faire sans action de l'utilisateur, au chargement de la page. J'avais commencé à changer le style "display" en fonction de la classe via une fonction avec boucle lancée par le "onload" de la balise "body". Mais il faudrait que la fonction parcourt tous les éléments HTML et ça me parait un peu bourrin.

deux fichiers css externalisés, les même noms de class mais des propriétés differentes ...
suffit alors de change le rel de la balise link

Ça m'embête un peu de faire deux fichiers avec une seule ligne dans chacun, mais ça a effectivement l'air d'être le plus simple.
Petite question toutefois, comment fais-je le changement de rel dans la balise link ? Via document.styleSheets[i].href ?

Code:

---

getElementsByTagName('link')[0].rel

---

sinon tu charges par défaut ta feuille css avec javacript, et dans une balise noscript , tu insère charge tas feuille des styles sans js

Le noscript avait l'air pas mal, mais le validateur HTML n'aime pas.

Sinon pourrais-je avoir un petit exemple plus explicite avec le rel ? :mrgreen:

Code:

---

1 2 3 4

<link id="testJS" rel="stylesheet" type="text/css" href="sansjs.css" /> <script type="text/javascript"> document.getElementById('testJS').href = 'avecjs.css'; </script>

---

Finalement, je suis revenu sur la solution proposée par Bovino.

Mes deux règles de style par défaut sont donc incluses directement dans la page Web, après le code CSS général du site :

Code:

---

1 2 3 4 5 6 7 8

<link rel="stylesheet" type="text/css" href="Conf/planning.css" /> <style type="text/css"> <!-- *.avec_JS {display:none} *.sans_JS {display:block} --> </style>

---

Je fais la modification des règles par Javascript au chargement avec le code suivant :

Code:

---

1 2 3 4 5 6 7 8

if (document.styleSheets[1].cssRules) var objReglesCssInternes = document.styleSheets[1].cssRules else if (document.styleSheets[1].rules) var objReglesCssInternes = document.styleSheets[1].rules   objReglesCssInternes[0].style.display = "block"; objReglesCssInternes[1].style.display = "none";

---

Reste que je ne sais pas comment faire apparaître un élément selon son type, c'est-à-dire un div comme un bloc, un span comme un élément en ligne... Sauf à faire des règles span.avec_JS, div.avec_JS... :?
Si quelqu'un a une idée sur ce point...

Ca y est, j'y suis ! :D

In fine je n'utilise plus qu'une seule règle CSS initiale dans la page, pour masquer les éléments de la classe "avec_JS" :

Code:

---

1 2 3 4 5 6 7

<link rel="stylesheet" type="text/css" href="Conf/planning.css" /> <style type="text/css"> <!-- *.avec_JS {display:none} --> </style>

---

Au chargement je supprime cette règle et j'en ajoute une pour faire disparaître les éléments de la classe "sans_JS" :

Code:

---

1 2 3 4 5 6 7 8 9 10

var objReglesCssInternes = document.styleSheets[1];   if (document.styleSheets[1].cssRules) { /* FF */ objReglesCssInternes.deleteRule(0); objReglesCssInternes.insertRule("*.sans_JS {display:none}", 0); } else if (document.styleSheets[1].rules) { /* IE */ objReglesCssInternes.removeRule(0); objReglesCssInternes.addRule("*.sans_JS", "display:none"); }

---

Merci pour vos aides respectives ! :ccool:

oui en gros comment aller à la salle de bain en passant par tokyo ...

Pourquoi ? Ca vous paraît trop compliqué ?

passer par les rules pour ça oui

Peut-être, mais je ne souhaitais pas utiliser deux fichiers CSS supplémentaires avec seulement 2 ou 3 règles chacun. D'autant qu'ils n'auraient été utilisés que par une seule page du site.

l'essentiel est que tu sois arrivé a tes fins ;)