Właściwość classList

Właściwość classList zawiera pseudotablicę klas CSS elementu, a także pozwala dodawać i usuwać klasy elementu, sprawdzać obecność określonej klasy wśród klas elementu.

Mowa o atrybucie class, wewnątrz którego można zapisać kilka klas poprzez spację, na przykład www ggg zzz. Za pomocą classList można usunąć, na przykład, klasę ggg, nie naruszając pozostałych klas.

Składnia

element.classList;

Przykład . Liczba klas

Sprawdzamy liczbę klas elementu:

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

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

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

Wynik wykonania kodu:

3

Przykład . Iterujemy po klasach

Wypisujemy po kolei klasy elementu:

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

Wynik wykonania kodu:

'www'
'ggg'
'zzz'

Zobacz również

metoda classList.add,
która dodaje zadaną klasę
metoda classList.remove,
która usuwa zadaną klasę
metoda classList.contains,
która sprawdza zadaną klasę
metoda classList.toggle,
która przełącza zadaną klasę