Esempio
Aggiungere il "mystyle" classe per un <div> elemento:
document.getElementById("myDIV").classList.add("mystyle"); Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e l'utilizzo
La proprietà classList restituisce la classe name(s) di un elemento, come un oggetto DOMTokenList.
Questa proprietà è utile per aggiungere, rimuovere e attivare le classi CSS su un elemento.
La proprietà classList è di sola lettura, tuttavia, è possibile modificarlo utilizzando l' add() e remove() metodi.
Soluzione cross-browser: La proprietà classList non è supportato in IE9 e precedenti. Tuttavia, è possibile utilizzare la className proprietà o espressioni regolari per una soluzione cross-browser (vedi "More Examples" sul fondo a questa pagina).
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
Sintassi
element .classListProprietà
| Proprietà | Descrizione |
|---|---|
| length | Restituisce il numero di classi nella lista. Questa proprietà è di sola lettura |
metodi
| Metodo | Descrizione |
|---|---|
| add( class1, class2, ... ) | Aggiunge uno o più nomi di classe ad un elemento. Se la classe specificata esiste già, non verrà aggiunto alla classe |
| contains( class ) | Restituisce un valore booleano, che indica se un elemento ha il nome della classe specificato. Valori possibili:
|
| item( index ) | Restituisce il nome della classe con un numero indice specificato da un elemento. Indice parte da 0. Restituisce null se l'indice è fuori portata |
| remove( class1, class2, ... ) | Rimuove uno o più nomi di classe di un elemento. Nota: La rimozione di una classe che non esiste, non genera un errore |
| toggle( class, true|false) | Alterna tra un nome di classe per un elemento. Il primo parametro rimuove la classe specificata da un elemento, e restituisce false. Se la classe non esiste, viene aggiunto l'elemento e il valore di ritorno è vero. Il secondo parametro opzionale è un valore booleano che costringe la classe da aggiungere o rimuovere, a prescindere dal fatto che esisteva già. Per esempio: Rimuovere una classe: elemento .classList. toggle("classToRemove", false) ; Aggiungere una classe: elemento .classList. toggle("classToAdd", true) ; Nota: Il secondo parametro non è supportato in Internet Explorer o Opera 12 e precedenti. |
Dettagli tecnici
| Valore di ritorno: | Un DOMTokenList, contenente un elenco di classe name(s) di un elemento |
|---|
Altri esempi
Esempio
Aggiungere più classi a un <div> elemento:
document.getElementById("myDIV").classList.add("mystyle",
"anotherClass", "thirdClass"); Prova tu stesso " Esempio
Rimuovere una classe da un <div> elemento:
document.getElementById("myDIV").classList.remove("mystyle"); Prova tu stesso " Esempio
Rimuovere più classi da un <div> elemento:
document.getElementById("myDIV").classList.remove("mystyle",
"anotherClass", "thirdClass"); Prova tu stesso " Esempio
Passare da due classi per un <div> elemento:
document.getElementById("myDIV").classList.toggle("newClassName"); Prova tu stesso " Esempio
Prendi la classe name(s) di un <div> elemento:
<div id="myDIV" class="mystyle
anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;Il risultato di x sarà:
mystyle
anotherClass thirdClass Prova tu stesso " Esempio
Scopri quanti nomi delle classi di una <div> elemento ha:
var x = document.getElementById("myDIV").classList.length;Il risultato di x sarà:
3 Prova tu stesso " Esempio
Ottenere il nome della classe prima (index 0) di un <div> elemento:
var x = document.getElementById("myDIV").classList.item(0);Il risultato di x sarà:
mystyle Prova tu stesso " Esempio
Scopri se un elemento ha un "mystyle" class:
var x = document.getElementById("myDIV").classList.contains("mystyle");Il risultato di x sarà:
true Prova tu stesso " Esempio
Scopri se un elemento ha un "mystyle" di classe. In tal caso, rimuovere un altro nome della classe:
var x = document.getElementById("myDIV");
if
(x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
} Prova tu stesso " Esempio
Alternare tra le classi per creare un pulsante a discesa:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which
is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick =
function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
Prova tu stesso " Esempio Fallback: aggiungi
Una soluzione cross-browser quando si utilizza il classList. add() il metodo, per IE9 e precedenti:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.add("mystyle");
} else {
x.className
= "mystyle"; // For IE9 and earlier
} Prova tu stesso " Esempio Fallback: rimuovere
Una soluzione cross-browser quando si utilizza il classList. remove() il metodo, per IE9 e precedenti:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9
and earlier
} Prova tu stesso " Fallback Esempio: contiene
Una soluzione cross-browser quando si utilizza il classList. contains() il metodo, per IE9 e precedenti:
var x = document.getElementById("myDIV");
if (x.classList)
{
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
} Prova tu stesso " Fallback Esempio: ginocchiera
Una soluzione cross-browser quando si utilizza il classList. toggle() metodo per IE9:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.toggle("mystyle");
} else {
// For IE9
var classes = x.className.split(" ");
var i =
classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
x.className = classes.join(" ");
} Prova tu stesso " Pagine correlate
Tutorial CSS: CSS selettori
CSS Riferimento: CSS .class Selector
HTML DOM Riferimento: HTML DOM className Property
HTML DOM Riferimento: HTML DOM getElementsByClassName() Metodo
HTML DOM Riferimento: HTML DOM Object Style
<Oggetto Element