element.className

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

js
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

js
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.

js
elm.setAttribute("class", elm.getAttribute("class"));

Spécifications

Specification
DOM
# ref-for-dom-element-classname①

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
className

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Voir aussi