Stylisation par classes en JavaScript
Styliser des éléments via l'attribut style
est parfois pratique, mais le plus souvent, ce n'est pas
la meilleure idée. Le problème est que les styles
seront dispersés dans le fichier JavaScript
et il sera laborieux de les modifier.
Il est bien plus pratique de définir les styles dans les fichiers
CSS pour pouvoir les modifier facilement,
sans avoir à fouiller dans le code JavaScript.
Prenons par exemple un élément affichant un message. Le message peut être "bon" et s'afficher en vert, et "mauvais" et s'afficher en rouge. La meilleure solution dans ce cas serait de créer pour cela les classes CSS correspondantes :
.success {
color: green;
}
.error {
color: red;
}
Maintenant, lors de l'affichage d'un message "bon" nous donnerons à l'élément la classe "bonne" :
elem.textContent = 'good';
elem.classList.add('success');
Et lors de l'affichage d'un message "mauvais" nous donnerons à l'élément la classe "mauvaise" :
elem.textContent = 'bad';
elem.classList.add('error');
Des paragraphes avec des nombres sont donnés. Parcourez ces paragraphes avec une boucle et colorez en rouge ceux contenant des nombres pairs, et ceux contenant des nombres impairs - en vert.
