Objet History JavaScript Objet Element HTML DOM

Propriété classList de l'HTML DOM

classListCette propriété lecture seule retourne un ensemble en temps réel de DOMTokenList contenant les attributs de classe de l'élément.

L'attribut classList est très utile pour ajouter, supprimer et basculer les classes CSS sur un élément.

Cette propriété est lecture seule, bien que vous puissiez la modifier en utilisant les méthodes add() et remove().

L'utilisation de classList est une méthode pratique qui permet declassNameAccédez à la liste des classes de l'élément par une chaîne de caractères séparée par des espaces.

Syntaxe :

element.classList

Exemple

var elem = document.getElementById("x");
elem.classList.add("para");

Vérifiez et voyez‹/›

Compatibilité du navigateur

Le nombre dans le tableau indique la première version du navigateur qui prend en charge complètement l'attribut classList :

Propriété
classList	8	3.6	Est	5.1	10

Nature

Propriété	Description
length	Retourne le nombre de classes dans la liste.

Méthode

Méthode	Description
add(class1, class2, ...)	Ajoute une ou plusieurs noms de classes à l'élément. Si la classe spécifiée existe déjà dans la propriété class de l'élément, cette classe ne sera pas ajoutée.
contains(class)}}	Vérifie si la valeur de la classe spécifiée existe dans la propriété class de l'élément. Valeurs possibles : true-L'élément contient le nom de classe spécifié false-L'élément ne contient pas le nom de classe spécifié.
item(index)}}	Retourne la valeur de la classe à partir de l'index dans la collection. L'index commence à 0. Si l'index dépasse la plage, retournenull.
remove(class1, class2, ...)	Supprime une ou plusieurs noms de classes de l'élément. Attention :La suppression des classes inexistantes ne déclenche pas d'erreur.
replace(oldClass, newClass)}}	Remplacer les classes existantes par de nouvelles classes.
toggle(class, true\|false)	Basculer entre les noms de classes de l'élément. Lorsque seul un paramètre existe : basculez la valeur de la classe ; sinon, retournez 0. C'est-à-dire, si la classe existe, supprimez-la et retournez false, si elle n'existe pas, ajoutez-la et retournez true. Lorsque le second paramètre optionnel est présent : si la valeur du second paramètre est true, ajoutez la valeur de la classe spécifiée ; si la valeur du second paramètre est false, supprimez-la. Exemple : 　　　　　 Supprimer une classe :element .classList.toggle（"classToRemove", false）; 　 Ajouter une classe :element .classList.toggle（"classToAdd", true）;

Détails techniques

Valeur de retour :	DOMTokenList, contient une liste des noms de classes de l'élément
Version DOM :	Niveau DOM1

Plus d'exemples

Ajouter plusieurs classes à l'élément :

Exemple

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

Vérifiez et voyez‹/›

Supprimer une classe de l'élément :

Exemple

var elem = document.getElementById("x");
elem.classList.remove("para");

Vérifiez et voyez‹/›

Supprimer plusieurs classes de l'élément :

Exemple

var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");

Vérifiez et voyez‹/›

Basculer entre les deux classes de l'élément :

Exemple

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

Vérifiez et voyez‹/›

Retournez les noms des classes de l'élément :

Exemple

var len = document.getElementById("x").classList.length;

Vérifiez et voyez‹/›

Retournez le nom des classes de l'élément :

Exemple

var name = document.getElementById("x").classList;

Vérifiez et voyez‹/›

Retournez le nom de la première classe de l'élément (index 0):

Exemple

var name = document.getElementById("x").classList[0];

Vérifiez et voyez‹/›

Utilisez la méthode item() pour retourner le nom de la première classe de l'élément (index 0):

Exemple

var name = document.getElementById("x").classList.item(0);

Vérifiez et voyez‹/›

Trouver si l'élément possède la classe "shadow":

Exemple

var list = document.getElementById("x").classList;
if(list.contains("shadow")){}}
alert("Yes!!! The P element contains'shadow'class");
}else{
alert("No'shadow'class found");　　　
}

Vérifiez et voyez‹/›

Basculer une classe ("open") pour créer un bouton de navigation latérale :