A classList tulajdonság

A classList tulajdonság az elem CSS osztályainak pszeudótömbjét tartalmazza, valamint lehetővé teszi az elem osztályainak hozzáadását és eltávolítását, valamint egy adott osztály jelenlétének ellenőrzését az elem osztályai között.

Itt a class attribútumról van szó, amelybe több osztályt is írhatunk szóközzel elválasztva, például www ggg zzz. A classList segítségével eltávolíthatjuk, például a ggg osztályt anélkül, hogy megzavarnánk a többi osztályt.

Szintaxis

elem.classList;

Példa . Osztályok száma

Határozzuk meg egy elem osztályainak számát:

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

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

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

A kód végrehajtásának eredménye:

3

Példa . Osztályok bejárása

Jelenítsük meg sorban az elem osztályait:

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

A kód végrehajtásának eredménye:

'www'
'ggg'
'zzz'

Lásd még

a classList.add metódus,
amely hozzáad egy megadott osztályt
a classList.remove metódus,
amely eltávolít egy megadott osztályt
a classList.contains metódus,
amely ellenőrzi egy megadott osztály jelenlétét
a classList.toggle metódus,
amely váltogat egy megadott osztályt