Attribut className de l'Element HTML DOM

Définition et utilisation

className Définir ou retourner l'attribut class de l'élément.

Veuillez également consulter :

Attribut classList de l'Element

Méthode getElementsByClassName() du Document

Objet Style HTML DOM

Exemple

Exemple 1

Définir l'attribut class de l'élément :

element.className = "myStyle";

essayez-le vous-même

Exemple 2

Obtenir l'attribut class de "myDIV" :

let value = document.getElementById("myDIV").className;

essayez-le vous-même

Exemple 3

Basculer entre deux noms de classes :

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

essayez-le vous-même

Avis :Plus d'exemples sont fournis en bas de la page.

Syntaxe

Retourner l'attribut className :

HTMLElementObject.className

Définir l'attribut className :

HTMLElementObject.className = class

Valeur de l'attribut

Valeur Description
class

Nom de la classe de l'élément.

Séparez plusieurs classes par des espaces, par exemple "test demo".

Retourne

Type Description
Chaîne La classe de l'élément, ou une liste de classes espacées.

Plus d'exemples

Exemple 4

Obtenez l'attribut class du premier <div> élément (s'il y en a un) :

let value = document.getElementsByTagName("div")[0].className;

essayez-le vous-même

Exemple 5

Obtenez l'attribut class d'un élément avec plusieurs classes :

<div id="myDIV" class="myStyle test example">
<p>J'ai myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

essayez-le vous-même

Exemple 6

Remplacez l'attribut class existant par un nouveau class attribut :

element.className = "newClassName";

essayez-le vous-même

Exemple 7

Pour ajouter une nouvelle classe sans remplacer la valeur existante, ajoutez un espace et la nouvelle classe :

element.className += " class1 class2";

essayez-le vous-même

Exemple 8

Si "myDIV" a la classe "myStyle", changez la taille de la police :

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

essayez-le vous-même

Exemple 9

Si vous faites défiler 50 pixels depuis le haut de la page, "test" sera ajouté :

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

essayez-le vous-même

support du navigateur

tous les navigateurs le supportent element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
supporte supporte supporte supporte supporte supporte

pages liées

Tutoriel CSS :Syntaxe CSS

Manuel de référence CSS :Sélecteur .class CSS