Oggetto History JavaScript Oggetto Element HTML DOM

Proprietà classList dell'HTML DOM

classListL'attributo readonly restituisce la raccolta in tempo reale DOMTokenList dell'attributo class dell'elemento.

L'attributo classList è molto utile per aggiungere, rimuovere e commutare le classi CSS sugli elementi.

L'attributo è readonly, anche se puoi modificarlo utilizzando i metodi add() e remove().

L'uso di classList è un metodo conveniente che puòclassNameAccedere alla lista delle classi dell'elemento con una stringa separata da spazi.

Sintassi:

element.classList

Esempio

var elem = document.getElementById("x");
elem.classList.add("para");

Prova a vedere‹/›

Compatibilità del browser

Il numero nella tabella indica la versione del browser che supporta per la prima volta l'attributo classList:

Proprietà
classList	8	3.6	È	5.1	10

Caratteristica

Proprietà	Descrizione
length	Restituire il numero di classi nella lista.

Metodo

Metodo	Descrizione
add(class1, class2, ...)	Aggiungere una o più classi ai nomi delle classi dell'elemento. Se l'attributo class dell'elemento contiene già la classe specificata, non verrà aggiunta la classe.
contains(class)}}	Controllare se il valore della classe specificato esiste nell'attributo class dell'elemento. Valori possibili: true-L'elemento contiene il nome della classe specificato false-L'elemento non contiene il nome della classe specificato
item(index)}}	Restituire il valore della classe tramite l'indice della raccolta. L'indice parte da 0. Se l'indice è fuori da gamma, viene restituitonull.
remove(class1, class2, ...)	Eliminare una o più classi da un elemento. Attenzione:Eliminare le classi non esistenti non provoca errori.
replace(oldClass, newClass)}}	Sostituisci le classi esistenti con nuove classi.
toggle(class, true\|false)	Switch tra i nomi delle classi dell'elemento. Quando esiste solo un parametro: cambia il valore della classe; altrimenti, restituisci 0. In altre parole, se la classe esiste, eliminala e restituisci false, se non esiste, aggiungila e restituisci true. Quando esiste un secondo parametro opzionale: se il valore del secondo parametro è true, aggiungi il valore della classe specificata; se il valore del secondo parametro è false, eliminalo. Esempio: 　　　　　 Elimina una classe:elemento .classList.toggle（"classToRemove",false）; 　 Aggiungi una classe:elemento .classList.toggle（"classToAdd",true）;

Dettagli tecnici

Valore restituito:	DOMTokenList, elenco delle classi dell'elemento
Versione DOM:	Livello DOM 1

Più esempi

Aggiungi più classi all'elemento :

Esempio

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

Prova a vedere‹/›

Elimina una classe dall'elemento :

Esempio

var elem = document.getElementById("x");
elem.classList.remove("para");

Prova a vedere‹/›

Elimina più classi dall'elemento :

Esempio

var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");

Prova a vedere‹/›

Switch tra due classi dell'elemento :

Esempio

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

Prova a vedere‹/›

Restituisci il nome delle classi dell'elemento :

Esempio

var len = document.getElementById("x").classList.length;

Prova a vedere‹/›

Restituisci il nome delle classi dell'elemento :

Esempio

var name = document.getElementById("x").classList;

Prova a vedere‹/›

Restituisci il nome della prima classe dell'elemento (indice 0):

Esempio

var name = document.getElementById("x").classList[0];

Prova a vedere‹/›

Utilizza il metodo item() per ottenere il nome della prima classe dell'elemento (indice 0):

Esempio

var name = document.getElementById("x").classList.item(0);

Prova a vedere‹/›

Trova se l'elemento ha la classe "shadow":

Esempio

var list = document.getElementById("x").classList;
if (list.contains("shadow")) {}}
alert("Sì!!! L'elemento P contiene la classe 'shadow'");
} else {
alert("Non è stata trovata la classe 'shadow'");　　　
}

Prova a vedere‹/›

Cambia una classe ("open") per creare pulsanti di navigazione laterale: