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>

[scrouet]

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.

[SpaceFrog]

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

[scrouet]

Ç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 ?

[SpaceFrog]

Code :

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

getElementsByTagName('link')[0].rel

[kimjoa]

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

[scrouet]

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 ?

[Bovino]

Code :

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

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>

[scrouet]

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 :

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

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 :

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

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

[scrouet]

Ca y est, j'y suis !

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 :

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

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 :

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

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 !

[SpaceFrog]

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

[scrouet]

Pourquoi ? Ca vous paraît trop compliqué ?

[SpaceFrog]

passer par les rules pour ça oui

[scrouet]

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.

[SpaceFrog]

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