Gli ultimi tutorial di sviluppo web
 

HTML DOM className Propery

<Oggetto Element

Esempio

Impostare la classe per un <div> elemento con id = "myDiv":

document.getElementById("myDIV").className = "mystyle";
Prova tu stesso "

Più "Try it Yourself" esempi di seguito.

Definizione e l'utilizzo

Gli insiemi di proprietà className o restituisce il nome della classe di un elemento (il valore dell'attributo di classe di un elemento).

Suggerimento: una proprietà simile a className è il classList proprietà.

Supporto browser

Proprietà
className sì sì sì sì sì

Sintassi

Restituire la proprietà className:

HTMLElementObject .className

Impostare la proprietà className:

HTMLElementObject .className= class

I valori delle proprietà

Valore Descrizione
class Specifica il nome della classe di un elemento. Per applicare più classi, separarli con spazi, come "test demo"

Dettagli tecnici

Valore di ritorno: Una stringa, che rappresenta la classe, o un elenco separato da spazi di classi, di un elemento
Esempi

Altri esempi

Esempio

Ottenere il nome della classe del primo <div> elemento nel documento (if any) :

var x = document.getElementsByTagName("DIV")[0].className;

Il risultato di x sarà:

mystyle
Prova tu stesso "

Esempio

Altri esempi su come ottenere il nome di classe di un elemento:

var x = document.getElementsByClassName("mystyle")[0].className;
var y = document.getElementById("myDIV").className;
Prova tu stesso "

Esempio

I nomi delle classi di un elemento con più classi:

<div id="myDIV" class="mystyle test example">I am a DIV element</div>

var x = document.getElementById("myDIV").className;

Il risultato di x sarà:

mystyle text example
Prova tu stesso "

Esempio

Sovrascrivere un nome di classe esistente con uno nuovo:

<div id="myDIV" class="mystyle">I am a DIV element</div>

document.getElementById("myDIV").className = "newClassName";
Prova tu stesso "

Esempio

Per aggiungere una classe a un elemento, senza sovrascrivere i valori esistenti, inserire uno spazio e il nuovo nome della classe:

document.getElementById("myDIV").className += " anotherClass";
Prova tu stesso "

Esempio

Se c'è una classe di "mystyle" in un elemento con id = "myDiv", modificare la sua font-size:

var x = document.getElementById("myDIV");

if (x.className === "mystyle") {
    x.style.fontSize = "30px";
}
Prova tu stesso "

Esempio

Alterna tra i nomi delle classi in diverse posizioni di scorrimento - Quando l'utente scorre verso il basso 50 pixel dalla parte superiore, il nome della classe "test" verranno aggiunti ad un elemento (and removed when scrolled up again) .

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50) {
        document.getElementById("myP").className = "test";
    } else {
        document.getElementById("myP").className = "";
    }
}
Prova tu stesso "

Pagine correlate

Tutorial CSS: CSS selettori

CSS Riferimento: CSS .class Selector

HTML DOM Riferimento: HTML DOM classList Property

HTML DOM Riferimento: HTML DOM getElementsByClassName() Metodo

HTML DOM Riferimento: HTML DOM Object Style

<Oggetto Element