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

javascriptélément.classList;

Exemple . Nombre de classes

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

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

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

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

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

javascript3

Exemple . Parcourons les classes

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

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

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

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

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

javascript'www'
'ggg'
'zzz'

Voir aussi