Element : propriété classList
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis octobre 2017.
La propriété en lecture seule classList de l'interface Element contient une collection dynamique (DOMTokenList) représentant l'attribut class de l'élément. Cela peut ensuite être utilisé pour manipuler la liste des classes.
L'utilisation de classList est une alternative pratique à l'accès à la liste des classes d'un élément sous forme de chaîne de caractères délimitée par des espaces avec element.className.
Valeur
Un objet DOMTokenList représentant le contenu de l'attribut class de l'élément. Si l'attribut class n'est pas défini ou est vide, il retourne un DOMTokenList vide, c'est-à-dire un DOMTokenList avec la propriété length égale à 0.
Bien que la propriété classList elle-même soit en lecture seule dans le sens où vous ne pouvez pas remplacer l'objet DOMTokenList, vous pouvez toujours affecter directement à la propriété classList, ce qui équivaut à affecter à sa propriété value. Vous pouvez également modifier l'objet DOMTokenList en utilisant les méthodes add(), remove(), replace() et toggle().
Exemples
const div = document.createElement("div");
div.className = "toto";
// notre point de départ : <div class="toto"></div>
console.log(div.outerHTML);
// utiliser l'API classList pour supprimer et ajouter des classes
div.classList.remove("toto");
div.classList.add("autreClasse");
// <div class="autreClasse"></div>
console.log(div.outerHTML);
// si "visible" est défini, le supprimer, sinon, l'ajouter
div.classList.toggle("visible");
// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10
div.classList.toggle("visible", i < 10);
// false
console.log(div.classList.contains("toto"));
// ajouter ou supprimer plusieurs classes
div.classList.add("toto", "tata", "truc");
div.classList.remove("toto", "tata", "truc");
// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation
const cls = ["toto", "tata"];
div.classList.add(...cls);
div.classList.remove(...cls);
// remplacer la classe "toto" par la classe "tata"
div.classList.replace("toto", "tata");
Spécifications
| Spécification |
|---|
| DOM # ref-for-dom-element-classlist① |
Compatibilité des navigateurs
Voir aussi
- La propriété
Element.className - L'interface
DOMTokenList