Nome classe elemento HTML DOM
❮ L'oggetto elementoEsempio
Imposta l'attributo class per un elemento:
element.className = "myStyle";
Ottieni l'attributo class di "myDIV":
let value = document.getElementById("myDIV").className;
Alterna tra due nomi di classe:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Altri esempi di seguito.
Definizione e utilizzo
La className
proprietà imposta o restituisce l'attributo di classe di un elemento.
Sintassi
Restituisce la proprietà className:
HTMLElementObject.className
Imposta la proprietà className:
HTMLElementObject.className = class
Valori di proprietà
Value | Description |
class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Valore di ritorno
Type | Description |
String | The class, or a space-separated list of classes, of an element |
Altri esempi
Ottieni l'attributo class del primo elemento <div> (se presente):
let value = document.getElementsByTagName("div")[0].className;
Ottieni un attributo di classe con più classi:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Sovrascrivi un attributo di classe esistente con uno nuovo:
element.className = "newClassName";
Per aggiungere nuove classi, senza sovrascrivere i valori esistenti, aggiungi uno spazio e le nuove classi:
element.className += " class1 class2";
se "myDIV" ha una classe "myStyle", cambia la dimensione del carattere:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Se scorri di 50 pixel dall'inizio di questa pagina, viene aggiunta la classe "test":
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Supporto browser
element.className
è supportato in tutti i browser:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ L'oggetto elemento