Vérifiez si une classe spécifique existe sur la page en utilisant JavaScript

Pendant le développement du site Web, les programmeurs se soucient parfois de la raison pour laquelle le résultat souhaité n'est pas affiché sur la page, ils doivent donc vérifier si la classe spécifique est ajoutée à la page ou à l'élément particulier ou non. Pour ce faire, JavaScript fournit quelques méthodes pour la vérification des classes d'un élément ou d'une page, comme la méthode contient () et la propriété Longueur avec la méthode GetElementsByClassName ().

Ce blog définira les méthodes pour déterminer si la classe spécifique existe sur la page en utilisant JavaScript.

Comment vérifier si une classe spécifique existe sur la page en utilisant JavaScript?

Pour vérifier si la classe particulière existe, utilisez les méthodes JavaScript suivantes:

• document.getElementsByClassName () avec une propriété de longueur.
• Contient () méthode

Méthode 1: Vérifiez si une classe spécifique / particulière existe sur la page à l'aide du document.getElementsByClassName () avec une propriété de longueur

Utilisez le "getElementsByClassName ()«Méthode avec le«longueur«Propriété pour déterminer si la classe particulière existe sur la page ou non. La méthode GetElementsByClassName () est utilisée pour sélectionner les éléments avec le nom de la classe, puis il est vérifié pour voir si l'attribut de longueur de la collection est supérieur à 0. S'il sort "Oui», La classe est présente sur la page.

Syntaxe

Suivez la syntaxe donnée pour l'utilisation de la méthode GetElementsByClassName () avec la propriété Longueur:

document.getElementsByClassName ('className').longueur

Passez le nom de classe comme un paramètre qui doit être vérifié.

Exemple

Dans un fichier html, concevez d'abord la page. Ici, nous ajouterons une image en tant que logo sur l'en-tête en utilisant un élément div et une balise:

src = "https: // linuxhint.com / wp-content / uploads / 2019/11 / logo-final.png "/>

Ensuite, définissez le titre sur l'en-tête:

Vérifiez si une classe spécifique existe sur la page en utilisant JavaScript

Après cela, créez un bouton sur la page qui appellera le «CheckClassexists ()«Fonction qui indique si la classe spécifique existe sur la page ou non:

Cliquez ici!

L'exécution du code HTML ci-dessus donne la page suivante sur le navigateur:

Maintenant, dans le fichier JavaScript ou la balise, utilisez le code suivant:

fonction CheckClassexists ()
const classcheck = document.getElementsByClassName ('flex-item1').longueur> 0;
if (classcheck)
alert ('✅ class "flex-item1" existe à la page');
autre
alert ('⛔️ class "flex-item1" n'existe pas à la page');

Dans le code ci-dessus:

• Tout d'abord, définissez une fonction "CheckClassexists ()"Cela déclenchera le bouton cliquer.
• Créez une variable qui stocke le résultat pour vérifier la classe "flex-item1"En utilisant le"getElementsByClassName ()"Méthode, puis vérifiez si la collection de la collection"longueur»L'attribut est supérieur à 0.
• Maintenant, montrez un message d'alerte pour l'existence de classe et ne pas exister sur la page.
• Si la valeur résultante dans la variable est supérieure à 0, elle montre «classe»flex-item1 "existe sur la page".
• Sinon, un message d'alerte montrera "classe "Flex-Item1 "n'existe pas sur la page".

Sortir

Pour vérifier si l'élément spécifié contient la classe particulière en javascript, vérifiez la section suivante.

Méthode 2: Vérifiez si la classe spécifique existe sur la page à l'aide de la méthode contient ()

Pour déterminer si une classe particulière existe sur une page Web, utilisez le «contient()«Méthode du«liste de classe" propriété. Passez le nom de classe dans la méthode CONTAINS (), et il donne vrai si le nom de classe existe dans l'élément spécifié ailleurs, il renvoie faux.

Syntaxe

Utilisez la syntaxe suivante pour la méthode CONTAINS ():

liste de classe.contient ('className')

Exemple

Comme nous le savons, tout le contenu de la page Web est à l'intérieur de la balise, nous allons donc d'abord récupérer l'élément corporel en utilisant son ID attribué:

Cliquez ici!

Définissez une fonction et récupérez l'élément corporel en passant l'ID attribué "p" dans le "getElementByid ()«Méthode, alors appelle«contient()"Méthode en passant la classe"diviser«Pour vérifier si cette classe existe dans toute la balise ou non:

fonction CheckClassexists ()
const classcheck = document.getElementById ('pg');
Si (Classcheck.liste de classe.contient ('divstyle'))
alert ('✅ class "divstyle" existe à la page');
autre
alert ('⛔️ Classe "Divstyle" n'existe pas à la page');

La sortie montre que le «corps«L'élément / tag ne contient pas le«diviser" classe:

Nous avons compilé les informations essentielles liées à la vérification d'une classe particulière sur la page à l'aide de JavaScript.

Conclusion

Pour déterminer si la classe particulière existe sur la page, utilisez le «document.getElementsByClassName ()«Méthode avec le«longueur«Propriété ou«contient()" méthode. La première méthode est la plus couramment utilisée à cet effet. La méthode contient () est utilisée pour tout élément spécifique. Dans ce blog, nous avons défini les méthodes pour déterminer si la classe spécifique existe sur la page en utilisant JavaScript.