propriété HTML DOM classList

Exemples

Pour l'élément <div> pour ajouter la classe:

document.getElementById ( "myDiv") .classList.add ( "mystyle");

Essayez »

Définition et utilisation

propriété classList renvoie le nom de la classe de l'élément, comme objet DOMTokenList.

Cette propriété est utilisée dans l'élément à ajouter, supprimer et activer classe CSS.

propriété classList est en lecture seule, mais vous pouvez utiliser l'add () et supprimer () pour modifier.

support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.

propriété
classList	8.0	10.0	3.6	5.1	11.5

grammaire

élément .classList

Propriétés

propriété	description
longueur	Retourne le numéro de la classe de liste de classe Cette propriété est en lecture seule

manière

manière	description
ajouter (classe1, class2, ...)	Ajouter un ou plusieurs noms de classe dans l'élément. Si le nom de classe spécifié existe déjà, il ne sera pas ajouter / td>
contient (classe)	Renvoie une valeur booléenne, on détermine si la présence du nom de la classe spécifiée. Valeurs possibles: true - package d'élément contient déjà un nom de classe Elément inexistant dans le nom de la classe - faux
item (index)	Retourne le nom de la classe dans la valeur de l'indice de l'élément. Les valeurs des indices commencent à partir de zéro. Si la valeur de l' indice est hors de portée de la plage ou null
retirer (classe1, class2, ...)	Supprimer un ou plusieurs éléments du nom de classe. Remarque: La suppression du nom de classe n'existe pas, ne se plaint pas.
toggle (classe, true \| false)	Changement des noms de classe dans l'élément. Le premier paramètre est le nom de la classe que vous souhaitez supprimer l'élément et renvoie false. Si le nom de classe n'existe pas, il va ajouter les noms de classe dans l'élément, et renvoie true. Le second est un paramètre optionnel est une valeur booléenne qui est utilisé pour définir si l'élément est obligatoire pour ajouter ou supprimer des catégories, quel que soit le nom de la classe existe. Par exemple: Retirer une classe: élément .classList.toggle ( "classToRemove" , false); Ajouter une classe: élément .classList.toggle ( "classToAdd" , true); Remarque: Internet Explorer ou Opera 12 et les versions antérieures ne prennent pas en charge le deuxième paramètre.

description technique

Retours:	A DOMTokenList, la liste des noms de classe contient des éléments

D'autres exemples

Exemples

Pour l'élément <div> pour ajouter d'autres catégories:

document.getElementById ( "myDiv") .classList.add ( "mystyle", "anotherClass", "troisième classe");

Essayez »

Exemples

Retirer une classe pour l'élément <div>:

document.getElementById ( "myDiv") .classList.remove ( "mystyle");

Essayez »

Exemples

Pour l'élément <div> pour supprimer plusieurs classes:

document.getElementById ( "myDiv") .classList.remove ( "mystyle", "anotherClass", "troisième classe");

Essayez »

Exemples

Pour l'élément <div> pour passer les catégories:

document.getElementById ( "myDiv") .classList.toggle ( "newClassName");

Essayez »

Exemples

Obtenez l'élément nom de la classe <div>:

<Div id = "myDiv" class = "mystyle anotherClass troisième classe"> Je suis un élément DIV </ div>

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

x La sortie est:

mystyle anotherClass troisième classe

Essayez »

Exemples

Voir élément <div> a un certain nombre de noms de classes:

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

x La sortie est:

Essayez »

Exemples

Obtenez élément <div> dans un premier nom de classe (indice 0):

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

x La sortie est:

mystyle

Essayez »

Exemples

Voir élément existe catégorie "mystyle":

var x = document.getElementById ( "myDiv" ) .classList.contains ( "mystyle");

x La sortie est:

vrai

Essayez »

Exemples

Voir élément existe catégorie "mystyle", si elle est présente supprimer un autre nom de classe:

var x = document.getElementById ( "myDiv" );

if (x.classList.contains ( "mystyle") ) {
x.classList.remove ( «anotherClass»);
} Else {
alert ( "Impossible de le trouver. ");
}

Essayez »