Propriété classList de l'élément HTML DOM

Définition et utilisation

classList La propriété retourne le nom de la classe de l'élément.

classList La propriété retourne DOMTokenList.

Exemple

Exemple 1

Ajoute la classe "myStyle" à l'élément :

const list = element.classList;
list.add("myStyle");

Essayez-le vous-même

Exemple 2

Supprime la classe "myStyle" de l'élément :

const list = element.classList;
list.remove("myStyle");

Essayez-le vous-même

Exemple 3

Basculer l'ouverture et la fermeture de "myStyle" :

const list = element.classList;
list.toggle("myStyle");

Essayez-le vous-même

Astuce :Plus d'exemples sont disponibles en bas de la page.

Syntaxe

element.classList

Valeur de retour

Type Description
Objet DOMTokenList. Liste des noms de classes de l'élément.

Remarque :La propriété classList est en lecture seule, mais vous pouvez utiliser les méthodes ci-dessous pour ajouter, basculer ou supprimer des classes CSS à partir de la liste :

Propriétés et méthodes classList

Nom Description
add() Ajoute un ou plusieurs jetons à la liste.
contains() Retourne true si la liste contient une classe.
entries() Retourne un itérateur avec des paires clé/valeur à partir de la liste.
forEach() Exécuter une fonction de rappel pour chaque jeton de la liste.
item() Retourner le jeton à l'indice spécifié.
keys() Retourner un itérateur contenant les clés de la liste.
length Retourner le nombre de jetons dans la liste.
remove() Supprimer un ou plusieurs jetons de la liste.
replace() Remplacer un jeton dans la liste.
supports() Retourner true si le jeton est l'un des jetons pris en charge par l'attribut.
toggle() Basculer entre les jetons dans la liste.
value Retourner la liste des jetons sous forme de chaîne.
values() Retourner un itérateur avec les valeurs de la liste.

Plus d'exemples

Exemple 4

Ajouter plusieurs classes à l'élément :

element.classList.add("myStyle", "anotherClass", "thirdClass");

Essayez-le vous-même

Exemple 5

Supprimer plusieurs classes de l'élément :

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Essayez-le vous-même

Exemple 6

Combien d'éléments y a-t-il dans le nom de classe de l'élément ?

let numb = element.classList.length;

Essayez-le vous-même

Exemple 7

Obtenir le nom de classe de l'élément "myDIV" :

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Je suis myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Essayez-le vous-même

Exemple 8

Obtenir la première classe de l'élément :

let className = element.classList.item(0);

Essayez-le vous-même

Exemple 9

L'élément a-t-il la classe "myStyle" ?

let x = element.classList.contains("myStyle");

Essayez-le vous-même

Exemple 10

Si l'élément a la classe "myStyle", supprimez "anotherClass" :

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Essayez-le vous-même

Exemple 11

Basculer entre les classes pour créer un bouton déroulant :

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Essayez-le vous-même

Exemple 12

Créer une navigation collée :

// Obtenez la barre de navigation
const navbar = document.getElementById("navbar");
// Obtenez la position décalée de la barre de navigation
const sticky = navbar.offsetTop;
// Ajoutez la classe sticky à la barre de navigation lorsque vous atteignez sa position de défilement
// Supprimez-le lorsque vous quittez la position de défilement
function myFunction() {
  if (window.pageYOffset  >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Essayez-le vous-même

Prise en charge du navigateur

Tous les navigateurs le prennent en charge element.classList

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Pages connexes

Tutoriel CSS :Syntaxe CSS

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

Objet DOMTokenList

Attribut className

Méthode getElementsByClassName()

Objet Style HTML DOM