Liste de classes d'éléments HTML DOM
❮ Objet élémentExemple
Ajoutez une classe "myStyle" à un élément :
element.classList.add("myStyle");
Supprimez la classe "myStyle" d'un élément :
element.classList.remove("myStyle");
Basculer entre deux classes pour un élément :
element.classList.toggle("newStyle");
Plus d'exemples ci-dessous.
Définition et utilisation
La classListpropriété renvoie les noms de classe CSS d'un élément.
La classListpropriété renvoie un objet DOMTokenList.
La classListpropriété est en lecture seule, mais vous pouvez utiliser les méthodes add() et remove() pour ajouter ou supprimer des classes CSS.
Noter
La classListpropriété est utile à la fois pour ajouter, supprimer et basculer des classes CSS sur un élément.
Voir également:
La propriété className de l'élément
Syntaxe
element.classList
Valeurs de propriété
| Value | Description |
| length | The number of classes in the list. This property is read-only. |
Méthodes
| Method | Description |
| add(class1, class2, ...) |
Adds one or more classes. |
| contains(class) |
Returns true if an element has the class, otherwise false.
|
| item(index) | Returns the class name with a specified index. Index starts at 0. Returns null if the index is out of range. |
| remove(class1, class2, ...) | Removes one or more classes from an element. Removing a class that does not exist, does NOT throw an error. |
| toggle(class, true|false) | Toggles between a class for an element. It removes the class and returns false.If the class does not exist, it adds the class and returns true.The optional second parameter is a boolean that forces the class to be added or removed, regardless of whether or not it already exists. The second parameter is not supported in Internet Explorer 11 or earlier. |
Valeur de retour
| Type | Description |
| Object | A DOMTokenList. A list of the class names of an element. |
Plus d'exemples
Ajoutez plusieurs classes à l'élément an :
element.classList.add("myStyle", "anotherClass", "thirdClass");
Supprimez plusieurs classes d'un élément :
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Combien de noms de classe l'élément a-t-il :
let numb = element.classList.length;
Obtenez les noms de classe de l'élément "myDIV" :
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
Obtenez la première classe d'un élément :
let className = element.classList.item(0);
Un élément a-t-il une classe "myStyle" ?
let x = element.classList.contains("myStyle");
Supprimez "anotherClass" si un élément a une classe "myStyle".
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
Basculez entre les classes pour créer un bouton déroulant :
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Créez une barre de navigation collante :
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Prise en charge du navigateur
element.classListest pris en charge dans tous les navigateurs :
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 10-11 | Yes | Yes | Yes | Yes |
❮ L'objet élément