Nom de classe de l'élément HTML DOM
❮ L'objet élémentExemple
Définissez l'attribut class d'un élément :
element.className = "myStyle";
Obtenez l'attribut de classe de "myDIV":
let value = document.getElementById("myDIV").className;
Basculer entre deux noms de classe :
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Plus d'exemples ci-dessous.
Définition et utilisation
La classNamepropriété définit ou renvoie l'attribut de classe d'un élément.
Syntaxe
Renvoyez la propriété className :
HTMLElementObject.className
Définissez la propriété className :
HTMLElementObject.className = class
Valeurs de propriété
| Value | Description |
| class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Valeur de retour
| Type | Description |
| String | The class, or a space-separated list of classes, of an element |
Plus d'exemples
Obtenez l'attribut class du premier élément <div> (le cas échéant) :
let value = document.getElementsByTagName("div")[0].className;
Obtenez un attribut de classe avec plusieurs classes :
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Remplacez un attribut de classe existant par un nouveau :
element.className = "newClassName";
Pour ajouter de nouvelles classes, sans écraser les valeurs existantes, ajoutez un espace et les nouvelles classes :
element.className += " class1 class2";
si "myDIV" a une classe "myStyle", changez la taille de la police :
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Si vous faites défiler 50 pixels depuis le haut de cette page, la classe "test" est ajoutée :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Prise en charge du navigateur
element.classNameest pris en charge dans tous les navigateurs :
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
❮ L'objet élément