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