La propriété en lecture seule Element.classList retourne une collection directe  DOMTokenList des attributs de classe de l'élément.

L'utilisation de classList est une alternative pratique pour accéder à la liste des classes d'un élément  comme une chaîne délimitée par des espaces avec la propriété element.className.

Syntaxe

const elementClasses = elementNodeReference.classList;

elementClasses est une DOMTokenList représentant l'attribut class de elementNodeReference. Si l'attribut class n'a pas été défini ou est vide elementClasses.length retourne 0. element.classList est en lecture seule. Pour la modifier il convient d'utiliser les méthodes add() et remove().

Méthodes

add( String [, String] )
Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée.
remove( String [, String] )
Supprime les classes spécifiées.
Note: Supprimer une classe qui n'existe pas NE génère PAS d'erreurs.
item( Number )
Renvoie la position d'une classe dans une collection.
toggle( String [, force] )
Si un seul argument est présent : change l'existence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie false, dans le cas inverse, ajoute cette classe et retourne true.
Si le second argument est présent : Si l'argument force est à true, ajoute cette classe, si l'argument est à false, la supprime.
contains( String )
Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.
replace( oldClass, newClass )
Remplace une classe par une autre.

Exemples

const div = document.createElement('div');
div.className = 'foo';

// notre point de départ: <div class="foo"></div>
console.log(div.outerHTML);

// utiliser l'API classList pour supprimer et ajouter des classes
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></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 );

console.log(div.classList.contains("foo"));

// ajouter ou supprimer plusieurs classes
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

// remplacer la classe "foo" par la classe "bar"
div.classList.replace("foo", "bar");

Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir https://bugzilla.mozilla.org/show_bug.cgi?id=814014

Spécifications

Spécification Statut Commentaire
HTML Living Standard
La définition de 'Element.classList' dans cette spécification.
Standard évolutif Note dans la spécification HTML relative à l'attribut class.
DOM
La définition de 'Element.classList' dans cette spécification.
Standard évolutif Définition initiale.
DOM4
La définition de 'Element.classList' dans cette spécification.
Obsolete  

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

 
Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support basic 8 12 3.6 (1.9.2) 10[1] 11.50 5.1
Second argument de la méthode toggle() 24 12 24 (24) Pas de support[2] 15 7
Plusieurs arguments pour add() & remove() 24 12 26 (26) Pas de support 15 7
replace() 61 ? 49 (49) Pas de support Pas de support Pas de support
Fonctionnalité Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support basic 3.0 12 1.0 (1.9.2) 10[1] 11.10 5.0
Second argument de la méthode toggle() 4.4 12 24.0 (24) Pas de support[2] ? 7.0
Plusieurs arguments pour add() & remove() 4.4 12 ? Pas de support ? 7.0
replace() Pas de support Pas de support 49 (49) Pas de support Pas de support Pas de support

[1] Non pris en charge pour les éléments SVG.  Voir un rapport à Microsoft à ce propos. Le problème est réparé dans Edge 16.16299
[2] Internet Explorer ne l'a jamais implémenté. Voir un rapport à Microsoft à ce propos.

Voir aussi

Étiquettes et contributeurs liés au document

Dernière mise à jour par : loella16,