Exemple
Ajouter le "mystyle" classe à un <div> élément:
document.getElementById("myDIV").classList.add("mystyle"); Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
La propriété classList renvoie la classe name(s) d'un élément, comme un objet DOMTokenList.
Cette propriété est utile pour ajouter, supprimer et activer des classes CSS sur un élément.
Cependant, la propriété classList est en lecture seule, vous pouvez le modifier en utilisant les add() et remove() méthodes.
Solution multi-navigateur: La propriété classList est pas pris en charge dans IE9 et plus tôt. Cependant, vous pouvez utiliser la className propriété ou des expressions régulières pour une solution multi-navigateur (voir "More Examples" au bas de cette page).
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| classList | 8.0 | 10.0 | 3.6 | 5.1 | 11.5 |
Syntaxe
element .classListPropriétés
| Propriété | La description |
|---|---|
| length | Retourne le nombre de classes dans la liste. Cette propriété est en lecture seule |
méthodes
| méthode | La description |
|---|---|
| add( class1, class2, ... ) | Ajoute un ou plusieurs noms de classe à un élément. Si la classe spécifiée existe déjà, la classe ne sera pas ajoutée |
| contains( class ) | Renvoie une valeur booléenne indiquant si un élément a le nom de la classe spécifiée. Valeurs possibles:
|
| item( index ) | Retourne le nom de la classe avec un numéro d'index spécifié d'un élément. L'index commence à 0. Retourne null si l'indice est hors de portée |
| remove( class1, class2, ... ) | Supprime un ou plusieurs noms de classe d'un élément. Remarque: La suppression d' une classe qui n'existe pas, ne jette pas une erreur |
| toggle( class, true|false) | Permet de basculer entre un nom de classe pour un élément. Le premier paramètre supprime la classe spécifiée d'un élément, et retourne faux. Si la classe n'existe pas, il est ajouté à l'élément, et la valeur de retour est vrai. Le second paramètre est une valeur booléenne qui force la classe à ajouter ou retirer, peu importe si oui ou non il existait déjà. Par exemple: Retirer une classe: élément .classList. toggle("classToRemove", false) ; Ajouter une classe: élément .classList. toggle("classToAdd", true) ; Remarque: Le deuxième paramètre est pas pris en charge dans Internet Explorer ou Opera 12 et plus tôt. |
Détails techniques
| Valeur de retour: | A DOMTokenList, contenant une liste de la classe name(s) d'un élément |
|---|
autres exemples
Exemple
Ajouter plusieurs classes à un <div> élément:
document.getElementById("myDIV").classList.add("mystyle",
"anotherClass", "thirdClass"); Essayez vous - même » Exemple
Retirer une classe d'un <div> élément:
document.getElementById("myDIV").classList.remove("mystyle"); Essayez vous - même » Exemple
Supprimer plusieurs classes à partir d' un <div> élément:
document.getElementById("myDIV").classList.remove("mystyle",
"anotherClass", "thirdClass"); Essayez vous - même » Exemple
Basculer entre deux classes pour un <div> élément:
document.getElementById("myDIV").classList.toggle("newClassName"); Essayez vous - même » Exemple
Obtenez la classe name(s) d'un <div> élément:
<div id="myDIV" class="mystyle
anotherClass thirdClass">I am a DIV element</div>
var x = document.getElementById("myDIV").classList;Le résultat de x sera:
mystyle
anotherClass thirdClass Essayez vous - même » Exemple
Découvrez combien de noms de classe un <div> élément a:
var x = document.getElementById("myDIV").classList.length;Le résultat de x sera:
3 Essayez vous - même » Exemple
Obtenez le premier nom de la classe (index 0) d'un <div> élément:
var x = document.getElementById("myDIV").classList.item(0);Le résultat de x sera:
mystyle Essayez vous - même » Exemple
Pour savoir si un élément a un "mystyle" classe:
var x = document.getElementById("myDIV").classList.contains("mystyle");Le résultat de x sera:
true Essayez vous - même » Exemple
Pour savoir si un élément a un "mystyle" classe. Si oui, supprimez un autre nom de classe:
var x = document.getElementById("myDIV");
if
(x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
} Essayez vous - même » Exemple
Basculer entre les classes pour créer un bouton de menu déroulant:
// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};
/* myFunction toggles between adding and removing the show class, which
is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick =
function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
Essayez vous - même » Exemple fallback: ajouter
Une solution multi-navigateur lors de l'utilisation du classList. add() méthode, pour IE9 et versions antérieures:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.add("mystyle");
} else {
x.className
= "mystyle"; // For IE9 and earlier
} Essayez vous - même » Exemple fallback: supprimer
Une solution multi-navigateur lors de l'utilisation du classList. remove() méthode, pour IE9 et plus tôt:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9
and earlier
} Essayez vous - même » Fallback Exemple: contient
Une solution multi-navigateur lors de l'utilisation du classList. contains() méthode, pour IE9 et plus tôt:
var x = document.getElementById("myDIV");
if (x.classList)
{
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
} Essayez vous - même » Exemple fallback: bascule
Une solution multi-navigateur lors de l'utilisation du classList. toggle() méthode, pour IE9:
var x = document.getElementById("myDIV");
if (x.classList) {
x.classList.toggle("mystyle");
} else {
// For IE9
var classes = x.className.split(" ");
var i =
classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
x.className = classes.join(" ");
} Essayez vous - même » Pages associées
Tutoriel CSS: CSS Selectors
CSS Référence: CSS .class Sélecteur
HTML DOM Référence: HTML DOM className Property
HTML DOM Référence: HTML DOM getElementsByClassName() Méthode
HTML DOM Référence: HTML DOM style objet
<Object Élément