Attributo className dell'Elemento DOM HTML

Definizione e uso

className Imposta o restituisce l'attributo class dell'elemento.

Vedi anche:

Proprietà classList dell'Elemento

Metodo getElementsByClassName() del Documento

Oggetto Style HTML DOM

Esempio

Esempio 1

Imposta l'attributo class dell'elemento:

element.className = "myStyle";

Prova personalmente

Esempio 2

Ottieni l'attributo class di "myDIV":

let value = document.getElementById("myDIV").className;

Prova personalmente

Esempio 3

Cambia tra due nomi di classe:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

Prova personalmente

Suggerimento:Più esempi sono disponibili nella parte inferiore della pagina.

Sintassi

Restituisce l'attributo className:

HTMLElementObject.className

Imposta l'attributo className:

HTMLElementObject.className = class

Valore dell'attributo

Valore Descrizione
class

Il nome della classe dell'elemento.

Separa più classi con spazi, come "test demo".

Valore di ritorno

Tipo Descrizione
Stringa La classe dell'elemento, o una lista di classi separate da spazi.

Più esempi

Esempio 4

Ottieni l'attributo class del primo <div> elemento (se esistente):

let value = document.getElementsByTagName("div")[0].className;

Prova personalmente

Esempio 5

Ottieni l'attributo class di un elemento con più classi:

<div id="myDIV" class="myStyle test example">
<p>Io sono myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

Prova personalmente

Esempio 6

Sovrascrivi l'attributo class esistente con un nuovo attributo class:

element.className = "newClassName";

Prova personalmente

Esempio 7

Per aggiungere una nuova classe senza sovrascrivere il valore esistente, aggiungi uno spazio e la nuova classe:

element.className += " class1 class2";

Prova personalmente

Esempio 8

Se "myDIV" ha la classe "myStyle", cambia la dimensione del font:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

Prova personalmente

Esempio 9

Se scrollerai 50 pixel dalla cima della pagina, verrà 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 = "";
  }
}

Prova personalmente

Supporto del browser

Tutti i browser lo supportano element.className:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto Supporto

Pagina relativa

Corso CSS:Sintassi CSS

Manuale di riferimento CSS:Selettore .class CSS