Changer l'apparence d'un élément depuis JavaScript ne consiste presque jamais à écrire des couleurs et des marges à la main. Cela consiste à poser ou retirer une classe, et à laisser la feuille de style faire le reste.
Cette séparation tient à un objet discret, présent sur tout élément : classList.
Définition
classList est une vue sur l'attribut class d'un élément, sous la forme d'une liste de mots. Elle expose des méthodes qui ajoutent ou retirent une classe sans toucher aux autres, et reflète l'état réel de l'élément à tout instant.
const carte = document.querySelector(".carte");
carte.classList.add("ouverte");
carte.classList.remove("masquee");
console.log(carte.classList.contains("ouverte")); // true
console.log(carte.classList.length);Les cinq méthodes
| Méthode | Ce qu'elle fait |
|---|---|
add | Ajoute une ou plusieurs classes, sans doublon |
remove | Retire une ou plusieurs classes, sans erreur si absentes |
toggle | Ajoute la classe si elle manque, la retire sinon |
contains | Rend un Boolean (booléen) indiquant la présence de la classe |
replace | Remplace une classe par une autre en un appel |
Les noms passent séparément : add("a", "b") ajoute deux classes, add("a b") lève une erreur, l'espace étant interdit dans un nom de classe.
toggle et son second argument
Un second argument booléen force le résultat : true ajoute, false retire. La méthode devient alors le miroir direct d'un état, ce qui évite un if de trois lignes.
const panneau = document.querySelector("#panneau");
const estOuvert = false;
panneau.classList.toggle("visible", estOuvert); // retire "visible"
const present = panneau.classList.toggle("visible");
console.log(present); // true : la classe vient d'être ajoutéeSans second argument, la valeur rendue indique si la classe est présente après l'appel.
Pourquoi pas className
className est la chaîne complète de l'attribut. Y écrire remplace tout, y compris les classes posées par une autre partie du code ou par le serveur.
// <div class="carte ombre selectionnee">
carte.className = "ouverte"; // les trois classes disparaissent
carte.classList.add("ouverte"); // les trois classes restentLa lecture reste parfois pratique, par exemple pour tracer l'état d'un élément dans la console. Pour toute modification, classList est la bonne réponse.
Questions fréquentes
Faut-il vérifier la présence avant d'ajouter ?
Non, add ignore une classe déjà présente et remove ignore une classe absente. Les deux méthodes sont sans effet dans ces cas, ce qui rend inutile tout test préalable. contains sert à décider d'autre chose, pas à protéger l'appel.
Comment obtenir la liste des classes ?
L'opérateur Spread (...) la convertit en Array (tableau), ce qui ouvre map et filter. La propriété value rend de son côté la chaîne complète, identique à className, utile pour un journal ou une comparaison rapide.
Vaut-il mieux modifier style directement ?
Rarement. Une valeur écrite dans style devient un style en ligne, qui prime sur la feuille de style et devient difficile à annuler. La classe garde la mise en forme au même endroit que le reste du CSS. style reste justifié pour une valeur calculée, comme une position en pixels.