Propriété classList de l'élément HTML DOM
- Page précédente children
- Page suivante className
- Retour au niveau supérieur Objet Elements DOM HTML
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");
Exemple 2
Supprime la classe "myStyle" de l'élément :
const list = element.classList; list.remove("myStyle");
Exemple 3
Basculer l'ouverture et la fermeture de "myStyle" :
const list = element.classList; list.toggle("myStyle");
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");
Exemple 5
Supprimer plusieurs classes de l'élément :
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Exemple 6
Combien d'éléments y a-t-il dans le nom de classe de l'élément ?
let numb = element.classList.length;
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;
Exemple 8
Obtenir la première classe de l'élément :
let className = element.classList.item(0);
Exemple 9
L'élément a-t-il la classe "myStyle" ?
let x = element.classList.contains("myStyle");
Exemple 10
Si l'élément a la classe "myStyle", supprimez "anotherClass" :
if (element.classList.contains("mystyle")) { element.classList.remove("anotherClass"); }
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"); }
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"); } }
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
- Page précédente children
- Page suivante className
- Retour au niveau supérieur Objet Elements DOM HTML