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

javascriptelemento.classList;

Esempio . Numero di classi

Scopriamo il numero di classi di un elemento:

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

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

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

Risultato dell'esecuzione del codice:

javascript3

Esempio . Iteriamo attraverso le classi

Stampiamo una per una le classi dell'elemento:

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

Risultato dell'esecuzione del codice:

javascript'www'
'ggg'
'zzz'

Vedi anche