Vérifiez si un élément contient une classe en JavaScript

L'utilisation de classes en HTML permet de regrouper les éléments et d'avoir le même style ou la même fonctionnalité. En conséquence, la modification du comportement de tous les éléments participant à une classe est aussi simple que d'écrire ou de modifier une seule ligne de code. Dans certains cas, comme la mise à jour d'un style, les utilisateurs peuvent avoir besoin de vérifier si une classe particulière fait partie d'un élément ou non.

Ce tutoriel illustrera comment vérifier si l'élément contient une classe en JavaScript.

Comment vérifier si un élément contient une classe en JavaScript?

Pour vérifier si un élément contient une classe, utilisez les méthodes suivantes:

• Contient () méthode
• Méthode Matches ()

Comprenons le fonctionnement de ces méthodes individuellement.

Méthode 1: Vérifiez si un élément contient une classe utilisant Contentants () Méthode

Le "contient()«Méthode du«liste de classe«L'objet peut être utilisé pour vérifier si un élément a un nom de classe particulier. C'est l'une des méthodes les plus populaires utilisées pour déterminer la classe d'un élément.

Syntaxe
Suivez la syntaxe donnée pour la méthode CONTAINS ():

élément.liste de classe.contient ('class-name')

Ici,

• "élément"Est un élément HTML qui sera vérifié s'il contient cette classe spécifique.
• Le "nom du cours»Identifiez le nom de la classe CSS dans laquelle l'élément fait partie de

Valeur de retour
Si l'élément a le nom de classe, il revient "vrai", Sinon ça redonne"FAUX".

Exemple
Créer un bouton avec des classes "tressaillement" et "bouton”Pour styliser le bouton. Attacher un «sur clic»Événement avec le bouton qui déclenche la fonction pour vérifier si la classe spécifiée fait partie de l'élément de bouton ou non:

Bouton

Avant le code JavaScript, la sortie ressemblera à ceci:

Dans un fichier javascript, écrivez simplement ces lignes de code:

fonction classcheck ()
const elementClass = document.queySelector ('bouton');
if (ElementClass.liste de classe.contient ('Buttonstyle'))
alerte ("Oui! Le bouton contient cette «classe Buttonstyle» »);

Dans le code ci-dessus:

• Définir une fonction "classcheck ()"Cela sera déclenché sur le bouton cliquer.
• Ensuite, récupérez le bouton à l'aide du "QuerySelector ()"Méthode et le stocker dans une variable"ElementClass".
• Appeler le "contient()«Méthode en passant un nom de classe spécifique comme«bouton«Ce qui vérifiera s'il fait partie du bouton ou non.
• S'il revient "vrai», Un message d'alerte sera affiché:

Sortir

La sortie ci-dessus indique que lorsque le bouton est cliqué, il montre qu'il a un «bouton" classe.

Méthode 2: Vérifiez si un élément contient une classe en utilisant des correspondances ()

Il existe une autre méthode, "allumettes()», Cela déterminera si l'élément a une classe particulière ou non. Il prend un seul paramètre, le nom de classe, pour vérifier si l'élément contient cette classe ou non.

Syntaxe
La syntaxe suivante est utilisée pour la méthode Matches ():

élément.allumettes('.nom du cours')

Dans la syntaxe ci-dessus,

• Le "élément"Est un élément HTML qui sera vérifié s'il contient cette classe particulière ou non.
• Le "nom du cours»Indique le nom de la classe CSS dans laquelle l'élément fait partie de. Le nom de la classe est transmis à la méthode Matches () avec un point (.) qui identifie «classe".

Valeur de retour
Il revient également "vrai"Si l'élément ou a une classe d'autre,"FAUX"Est retourné.

Exemple
Dans un fichier JavaScript, utilisez les lignes de code donné pour vérifier si l'élément a la classe spécifique ou non en appelant la méthode Matches ():

fonction classcheck ()
const elementClass = document.queySelector ('bouton');
if (ElementClass.allumettes('.Buttonstyle '))
alerte ("Oui! Le bouton contient cette «classe Buttonstyle» »);

Dans l'extrait de code ci-dessus:

• Tout d'abord, définissez une fonction "classcheck ()"Cela sera déclenché sur le bouton cliquer.
• Ensuite, récupérez le bouton à l'aide du "QuerySelector ()"Méthode et le stocker dans une variable"ElementClass".
• Appeler le "allumettes()«Méthode en passant un nom de classe spécifique comme ici,«bouton"Avec un point (.) avant lui, ce qui indiquera que c'est la classe et vérifiez s'il fait partie du bouton ou non.
• Si la méthode correspondant () renvoie "vrai», Un message alerte«Oui! Le bouton contient cette classe 'Buttonstyle'"Sera affiché:

Sortir

Conclusion

Pour vérifier si un élément contient une classe, utilisez le javascript "contient()«Méthode ou le«allumettes()" méthode. La méthode contient () est la méthode la plus utilisée pour déterminer la classe de l'élément. Les deux méthodes reviennent "vrai"Si l'élément a une classe d'autre"FAUX"Est retourné. Ce tutoriel a illustré comment vérifier si un élément contient une classe en JavaScript ou non avec des exemples détaillés.