Propriété classList

La propriété classList contient un pseudo-tableau des classes CSS de l'élément, et permet également d'ajouter et de supprimer des classes de l'élément, de vérifier la présence d'une classe spécifique parmi les classes de l'élément.

Il s'agit de l'attribut class, à l'intérieur duquel on peut écrire plusieurs classes séparées par un espace, par exemple www ggg zzz. Avec classList, on peut supprimer, par exemple, la classe ggg, sans affecter les autres classes.

Syntaxe

élément.classList;

Exemple . Nombre de classes

Découvrons le nombre de classes de l'élément :

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

Résultat de l'exécution du code :

3

Exemple . Parcourons les classes

Affichons successivement les classes de l'élément :

<p id="elem" class="www ggg zzz"></p>

let elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
	console.log(className);
}

Résultat de l'exécution du code :

'www'
'ggg'
'zzz'

Voir aussi

la méthode classList.add,
qui ajoute une classe donnée
la méthode classList.remove,
qui supprime une classe donnée
la méthode classList.contains,
qui vérifie une classe donnée
la méthode classList.toggle,
qui alterne une classe donnée