Changer le style d'une page via JavaScript

Au départ aucune classe n'est affectée aux trois noeuds balisés par les balises SECTION, H1 et P.
Puis en fonction du bouton cliqué vous affectez la classe marine ou la classe barbie ou la classe gothique à chacun de ces trois noeuds.

Le code CSS de la page (extrait)

... section {width : 900px ; height : 600px ; border : 2px solid black ; margin : auto ; } .marine {background : aqua ; color : navy ; border-color : navy ; } .barbie {background : pink ; color : purple ; border-color : purple; } .gothique {background : black ; color : red ; border-color : red ; }

Le code HTML de la page (extrait)

... <section> <h1>Changer le style d'une page via JavaScript</h1> <p>Au départ aucune classe n'est affectée aux trois noeuds balisés par les balises SECTION, H1 et P. ... <button>style marine </button> <button>style barbie </button> <button>style gothique </button> </section> ...

Le code JavaScript de la page

// variables objets globales pour référencer trois noeuds de la page var page = document.querySelector("section"); var titre = document.querySelector('h1'); var texte = document.querySelector('p'); var vnomclasse ; // variable globale document.querySelectorAll('button')[0].onclick = function() {vnomclasse ='marine'; changer_style(); } document.querySelectorAll('button')[1].onclick = function() {vnomclasse ='barbie'; changer_style();} document.querySelectorAll('button')[2].onclick = function() {vnomclasse ='gothique';changer_style();} // si clic sur l'un des boutons de commande la variable vnomclasse change de valeur // et on appelle la fonction changer_style function changer_style() { page.setAttribute("class",vnomclasse); titre.setAttribute("class",vnomclasse); texte.setAttribute("class",vnomclasse); // on affecte une classe aux noeuds page, titre et texte } // fin fonction

Commentaire

En JavaScript c'est très simple de changer le style de la page en modifiant la classe affectée à chaque élément HTML (noeud).
class est un attribut d'élément HTML. Donc il suffit d'utiliser la méthode setAttribute.

La variable vnomclasse doite être globale (déclarée en dehors de toute fonction) car elle est utilisée dans différentes fonctions.

Autre solution

On aurait pu utiliser une autre syntaxe dans la fonction changer_style.
En effet pour changer la valeur d'un attribut d'un noeud on peut utiliser la syntaxe simplifiée : élément.attribut = nouvelle valeur à la place de la méthode setAttribute.

Mais attention il y a ici un piège. Le mot className doit être utilisé en guise d'attribut et non pas class. Ce n'est pas très logique mais c'est ainsi ...
Donc il aurait fallu écrire :

... page.className = vnomclasse ; titre.className = vnomclasse ; texte.className =vnomclasse ; ...

Ce thème est repris dans la partie jQuery de ce tuto.
Retour menu