La proprietà className dell'interfaccia Element ottiene e imposta il valore dell'attributo class dell'elemento specificato.

Sintassi

var cName = elementNodeReference.className;
elementNodeReference.className = cName;
  • cName è una variabile stringa che rappresenta le classi o le classi separate dallo spazio dell'elemento corrente.

Esempio

let el = document.getElementById('item');

if (el.className === 'active'){
  el.className = 'inactive';
} else {
  el.className = 'active';
}

Appunti

Il nome className viene utilizzato per questa proprietà anziché class a causa di conflitti con la parola chiave "class" in molte lingue che vengono utilizzati per manipolare il DOM.

className può anche essere un'istanza di SVGAnimatedString se element è un SVGElement. È meglio ottenere/impostare className di un elemento usando Element.getAttribute e Element.setAttribute se si ha a che fare con elementi SVG. Tuttavia, tieni presente che Element.getAttribute ritorna null anzichè "" se element ha un attributo class vuoto.

elm.setAttribute('class', elm.getAttribute('class'))

class è un Attributo HTML, mentre className è una proprietà del DOM.

Specifiche

Specifica Stato Commento
DOM
The definition of 'element.className' in that specification.
Living Standard  
DOM4
The definition of 'element.className' in that specification.
Obsolete  
Document Object Model (DOM) Level 2 HTML Specification
The definition of 'element.className' in that specification.
Obsolete Definizione iniziale

Compatibilità con i browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 43Edge Full support YesFirefox Full support YesIE Full support YesOpera Full support YesSafari Full support 6WebView Android Full support 43Chrome Android Full support 43Edge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

Vedi anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: IsibisiDev, teoli, khalid32, DaViD83
Ultima modifica di: IsibisiDev,