Stylisation à l'aide de classes CSS en JavaScript

Dans la leçon précédente, nous avons appris à modifier les styles CSS des éléments en changeant l'attribut style. Le plus souvent, ce n'est pas une très bonne idée. En effet, si l'on disperse les styles CSS dans le code JavaScript, il sera par la suite problématique de modifier le design du site, car il faudra fouiller le code JavaScript à la recherche des styles qui y sont intégrés.

Pour la maintenance future, il sera plus pratique d'ajouter ou de retirer des classes CSS à l'élément, les stylisant ainsi de la manière souhaitée.

Regardons un exemple. Supposons que nous ayons plusieurs paragraphes :

<p>text1</p>
<p>text2</p>
<p>text3</p>

Faisons en sorte qu'un clic sur n'importe quel paragraphe colore ce paragraphe dans une certaine couleur, par exemple, le vert. Pour cela, dans le fichier CSS, créons une classe spéciale pour colorer les paragraphes :

.colored {
	color: green;
}

L'avantage d'utiliser une classe est qu'il sera maintenant facile de changer la couleur souhaitée - pour cela, il suffira de simplement apporter une modification dans le fichier CSS, sans toucher au code JavaScript. C'est particulièrement pratique dans le cas où le code JavaScript est écrit par vous, et que par la suite sa stylisation sera faite par quelqu'un d'autre (peut-être une personne moins qualifiée, ne sachant travailler qu'avec le CSS).

Ainsi, maintenant, après l'introduction de la classe, lors d'un clic sur n'importe quel paragraphe, on peut changer sa couleur, simplement en lui ajoutant notre classe :

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function() {
		this.classList.add('colored'); // ajoute la classe au paragraphe
	});
}

Expliquez pourquoi j'ai choisi pour le nom de la classe le mot colored, et non le mot green, indiquant explicitement la couleur que nous souhaitons.

Soit un paragraphe. Soient les boutons 'barrer', 'mettre en gras', 'rendre rouge'. Faites en sorte qu'au clic sur chaque bouton, l'action donnée se produise sur le paragraphe (qu'il devienne rouge, par exemple).