JavaScript classList est une propriété DOM de JavaScript qui permet de styliser les classes CSS (Cascading Style Sheet) d'un élément. JavaScript classList est une propriété en lecture seule qui renvoie les noms des classes CSS. Il s'agit d'une propriété de JavaScript par rapport aux autres propriétés de JavaScript qui inclut le style et le nom de classe. La propriété style renvoie la couleur ou un autre style de l'élément de classe CSS, et className est utilisée pour renvoyer les noms des classes utilisées dans le fichier CSS. Cependant, les propriétés className et classList renvoient le nom des classes que nous avons utilisées dans le fichier CSS mais de différentes manières. La propriété className renvoie le nom des classes sous forme de chaîne, alors que la propriété classList de Javascript renvoie le nom des classes sous forme de tableau.

Ici, nous aborderons une brève discussion sur JavaScript classList et discuterons également de ses méthodes avec leurs implémentations pratiques.

Exemple de propriété JavaScript classList

Vous trouverez ci-dessous un exemple de propriété JavaScript classList grâce à laquelle nous obtiendrons la valeur de classe d'un élément.

 <h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById(&apos;btn&apos;); alert(e.classList); } 

La sortie du code ci-dessus est présentée ci-dessous :

Propriété classeList JavaScript

La propriété classList est utilisée pour représenter la valeur des éléments de classe qui est un Liste de jetons DOM objet. C'est une propriété en lecture seule mais on peut modifier sa valeur en manipulant les classes utilisées dans le programme. La propriété JavaScript classList se compose des méthodes suivantes grâce auxquelles nous pouvons effectuer différentes opérations sur les éléments de la classe :

ajouter():La méthode add() est utilisée pour ajouter une ou plusieurs classes à l'élément.retirer():La méthode Remove() permet de supprimer une ou plusieurs classes du nombre de classes présentes dans l'élément.basculer():La méthode toggle() est utilisée pour basculer les noms de classe spécifiés d'un élément. Cela signifie que d'un seul clic, la classe spécifiée est ajoutée et que d'un autre clic, la classe est supprimée. C'est ce qu'on appelle la propriété bascule d'un élément.remplacer():La méthode replace() est utilisée pour remplacer une classe existante par une nouvelle classe.contient():La méthode contain() de la propriété JavaScript classList est utilisée pour renvoyer la valeur booléenne en sortie. Si la classe est présente, la valeur est renvoyée comme true sinon false est renvoyé.article():La méthode item() est utilisée pour afficher le nom des classes à l’index particulier. Ainsi, il renvoie le nom de la classe.

Voici quelques-unes des méthodes utilisées dans la liste de classes JavaScript.

Nous en discuterons un par un.

classList.add()

La fonction utilisée pour ajouter une ou plusieurs classes à l'élément CSS.

Exemple:

L'exemple ci-dessous montre comment ajouter une classe à l'aide de la méthode classList.add() :

 .myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.add(&apos;myClass&apos;); } 

Dans le code, lorsque l'utilisateur clique sur le bouton, la nouvelle classe est ajoutée aux classes existantes. Le résultat après avoir cliqué sur le bouton est affiché ci-dessous :

monflixr

classList.remove()

La fonction Remove() est utilisée pour supprimer les classes existantes des éléments.

L'exemple ci-dessous montre comment supprimer une ou plusieurs classes à l'aide de la méthode classlist.remove() :

 .myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.remove(&apos;myClass&apos;); } 

Dans le code ci-dessus, lorsque l'utilisateur clique sur le bouton, la classe spécifiée particulière est supprimée des classes CSS existantes. Le résultat après avoir cliqué sur le bouton est affiché ci-dessous :

Liste de classes.toggle()

Le bouton toggle() est utilisé pour basculer les classes vers l'élément. Cela signifie ajouter une nouvelle classe ou supprimer les classes existantes.

Vous trouverez ci-dessous un exemple qui nous fera comprendre comment utiliser la méthode toggle() pour ajouter ou supprimer des classes.

Exemple:

 .myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

Dans le code, lorsque l'utilisateur clique sur le bouton, la classe sera ajoutée ou supprimée des classes CSS. Le résultat après avoir cliqué sur le bouton est affiché ci-dessous :

Classlist.contains()

La méthode contain() est utilisée pour vérifier si la classe spécifiée existe dans les classes CSS et par rapport à elle, elle renvoie la valeur booléenne comme vraie ou fausse.

Vous trouverez ci-dessous un exemple qui montre comment rechercher une classe si elle existe ou non à l'aide de la méthode contain() :

Exemple:

 function getClass() { var e = document.getElementById(&apos;Btn&apos;); document.write(e.classList.contains(&apos;myClass&apos;)+&apos; <br>&apos;+&apos;myclass is the name of the class&apos;); } 

Dans le code ci-dessus, on voit que lorsque l'utilisateur clique sur le bouton, il vérifie la classe spécifiée si elle est présente dans les classes CSS. S'il est présent, une valeur booléenne comme true sera renvoyée. Sinon, cela retournera faux. La sortie du code ci-dessus après avoir cliqué sur le bouton est affichée ci-dessous :

liste de classes.replace()

La méthode replace() est utilisée pour remplacer une classe existante par une nouvelle. Cela ne signifie pas que la classe est supprimée des éléments mais que les propriétés de la classe existante sont remplacées par les propriétés de la nouvelle classe.

Ci-dessous un exemple à travers lequel nous comprendrons comment remplacer une classe existante par une nouvelle classe :

Exemple:

 .myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 

Dans le code ci-dessus, lorsque l'utilisateur clique sur le bouton, les propriétés de classe existantes sont remplacées par les nouvelles propriétés de classe. Le résultat après avoir cliqué sur le bouton est affiché ci-dessous :

classList.item()

La fonction item() est utilisée pour renvoyer le nom de la classe qui est présente à la valeur d'index spécifiée.

Vous trouverez ci-dessous un exemple qui nous fera comprendre comment utiliser la méthode item() pour renvoyer la valeur :

Exemple:

 <h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById(&apos;Btn&apos;); alert(e.classList.item(2)); } 

Dans le code, lorsque l'utilisateur clique sur le bouton, la classe présente sur l'index spécifié sera affichée. Après avoir cliqué sur le bouton, nous obtenons la valeur de classe d'index spécifiée, comme indiqué ci-dessous :

Voici quelques-unes des méthodes de l'objet DOM classList et tout sur classList.