Proprietatea classList

Proprietatea classList conține un pseudo-array al claselor CSS ale elementului și, de asemenea, permite adăugarea și eliminarea claselor elementului, verificarea prezenței unei anumite clase între clasele elementului.

Vorbim despre atributul class, în interiorul căruia se pot scrie mai multe clase separate prin spațiu, de exemplu www ggg zzz. Cu ajutorul classList se poate elimina, de exemplu, clasa ggg, fără a afecta celelalte clase.

Sintaxă

element.classList;

Exemplul . Numărul de clase

Aflăm numărul de clase ale elementului:

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

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

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

Rezultatul executării codului:

3

Exemplul . Iterăm prin clase

Afișăm pe rând clasele elementului:

<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);
}

Rezultatul executării codului:

'www'
'ggg'
'zzz'

Veți și

metoda classList.add,
care adaugă o clasă specificată
metoda classList.remove,
care elimină o clasă specificată
metoda classList.contains,
care verifică o clasă specificată
metoda classList.toggle,
care alternează o clasă specificată