Proprietà classList

La proprietà classList contiene un pseudo-array delle classi CSS dell'elemento, e permette anche di aggiungere e rimuovere classi dell'elemento, verificare la presenza di una classe specifica tra le classi dell'elemento.

Si tratta dell'attributo class, all'interno del quale è possibile scrivere diverse classi separate da spazio, ad esempio www ggg zzz. Utilizzando classList è possibile rimuovere, ad esempio, la classe ggg, senza intaccare le altre classi.

Sintassi

elemento.classList;

Esempio . Numero di classi

Scopriamo il numero di classi di un elemento:

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

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

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

Risultato dell'esecuzione del codice:

3

Esempio . Iteriamo attraverso le classi

Stampiamo una per una le classi dell'elemento:

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

Risultato dell'esecuzione del codice:

'www'
'ggg'
'zzz'

Vedi anche

metodo classList.add,
che aggiunge una classe specificata
metodo classList.remove,
che rimuove una classe specificata
metodo classList.contains,
che verifica una classe specificata
metodo classList.toggle,
che alterna una classe specificata