element.className

La propriété className de l'interface Element récupère et définit la valeur de l'attribut class de l'élément spécifié

Syntaxe

var cName = elementNodeReference.className;
elementNodeReference.className = cName;
  • cName est une String (chaîne de caractères) représentant la classe (ou les classes séparées par des espaces) de l'élément courant.

Exemple

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

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

Notes

Le nom className est utilisé pour cette propriété au lieu de class à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM.

className peut être une instance de SVGAnimatedString si l'element est un SVGElement. Dans ce cas là, l'usage de className ne fonctionnera pas, il sera donc préférable d'utiliser Element.getAttribute et Element.setAttribute si vous utilisez des élements SVG. 

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

Spécifications

Spécification Statut Commentaire
DOM
La définition de 'element.className' dans cette spécification.
Standard évolutif
DOM4
La définition de 'element.className' dans cette spécification.
Obsolete
Document Object Model (DOM) Level 2 HTML Specification
La définition de 'element.className' dans cette spécification.
Obsolete Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
classNameChrome Support complet 43Edge Support complet 12Firefox Support complet 1IE Support complet 8Opera Support complet 8Safari Support complet 6WebView Android Support complet 43Chrome Android Support complet 43Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 6Samsung Internet Android Support complet 4.0

Légende

Support complet  
Support complet

Voir aussi