Vérifiez si le corps a une classe spécifique en utilisant JavaScript

Vérifiez si le corps a une classe spécifique en utilisant JavaScript
Lors de la conception d'une page Web ou du site, il peut y avoir une possibilité de trier des fonctionnalités similaires contre une classe dédiée à la fin du développeur. Par exemple, allouant une page Web particulière au même élément mais avec une classe distincte pour rendre les choses pertinentes. Dans de telles situations, la vérification si un corps a une classe spécifique aide à accéder facilement à diverses fonctionnalités et dans les processus de mise à jour.

Cet article montrera les approches pour vérifier si un corps a une classe spécifique en utilisant JavaScript.

Comment vérifier si le corps a une classe spécifique en utilisant JavaScript?

Pour vérifier si un corps a une classe spécifique à l'aide de JavaScript, appliquez les approches suivantes:

  • "liste de classe»Propriété et«contient()" méthode.
  • "getElementsByTagName ()" et "correspondre()«Méthodes.
  • "jquery".

Illustrons chacune des approches une par une!

Approche 1: Vérifiez si Body a une classe spécifique en JavaScript en utilisant la propriété Classlist et contient () méthodes

Le "liste de classe»La propriété donne les noms de classe CSS d'un élément. Tandis que le "contient()”La méthode donne vrai si un nœud est un descendant. Ces méthodes combinées peuvent être appliquées pour accéder à la classe contenue dans l'élément associé.

Syntaxe

nœud.contient (desnode)

Dans la syntaxe ci-dessus:

  • "desnode»Correspond au descendant de nœud du nœud associé.

Exemple
Ayons un aperçu de l'exemple ci-dessous:


Ceci est le site Web de Linuxhint



Appliquez les étapes ci-dessous, comme indiqué dans le code ci-dessus:

  • Tout d'abord, incluez un «"Élément ayant l'attribut set"classe".
  • Ajoutez également une rubrique dans l'élément particulier ().
  • Dans le code JS, appliquez le «liste de classe«Propriété combinée avec le«contient()" méthode.
  • Cela va en résulter l'accès à la classe des associés «»Élément basé sur le nom de classe spécifié dans le paramètre de la méthode.
  • Sur l'état satisfait, le «si»La condition exécutera.
  • Contrairement, le «autre»Le bloc de code de déclaration s'exécutera.

Sortir

Dans la sortie ci-dessus, on peut voir que la classe particulière est incluse dans le «" élément.

Approche 2: Vérifiez si Body a une classe spécifique en JavaScript à l'aide de GetElementsByTagName () et Match () Méthodes

Le "getElementsByTagName ()”La méthode donne une collection de tous les éléments ayant un nom de balise particulier. Le "correspondre()»La méthode correspond à la valeur spécifiée avec la chaîne. Ces méthodes peuvent être utilisées pour accéder à l'élément requis par sa balise et vérifier la classe spécifique.

Syntaxe

document.GetElementsByTagName (TAG)

Dans la syntaxe fournie:

  • "étiqueter»Représente le nom de la balise de l'élément.

Exemple
L'exemple suivant démontre le concept discuté:




Dans l'extrait de code ci-dessus:

  • De même, incluez un «”Élément ayant la classe spécifiée.
  • Contenir également une image avec les dimensions de définition dans l'élément indiqué dans l'étape précédente.
  • Dans les lignes de code JavaScript, accédez au «»Élément par sa balise en utilisant le«getElementsByTagName ()" méthode.
  • Le "[0]"Indique que le premier élément correspondant à la balise indiquée à l'étape précédente sera récupéré.
  • Le "nom du cours«Propriété et le«correspondre()«La méthode correspondra à la classe déclarée dans son paramètre contre le«" élément.
  • L'ancienne déclaration dans le «si»La condition s'exécutera sur la satisfaction de toutes les conditions dans les étapes précédentes.
  • Sinon, cette dernière déclaration sera affichée.

Sortir

La sortie ci-dessus indique que la condition appliquée pour une classe spécifique est satisfaite.

Approche 3: Vérifiez si le corps a une classe spécifique en JavaScript en utilisant jQuery

Cette approche peut être mise en œuvre pour accéder directement à l'élément requis et localiser la classe spécifique contre elle à l'aide de sa méthode simplement.

Exemple
Passons par l'exemple donné ci-dessous:





if ($ ("corps").hasclass ("contient"))
alerte ("l'élément corporel a une classe")

autre
alerte ("l'élément corporel n'a pas de classe")

Dans les lignes de code ci-dessus:

  • Inclure le "jquery»Bibliothèque pour utiliser ses fonctionnalités.
  • De même, incluez le «»Élément ayant la classe indiquée.
  • Ajoutez également un "”Élément dans l'élément indiqué à l'étape précédente.
  • Dans le code JS, accédez au «" élément. Appliquez également le «HasClass ()”Méthode pour rechercher la classe indiquée dans l'élément récupéré.
  • Cela a en conséquence alerter l'ancien message sur l'état satisfait.
  • Dans l'autre cas, cette dernière déclaration sera affichée.

Sortir

La sortie ci-dessus implique que l'exigence souhaitée est obtenue.

Conclusion

Le "liste de classe»Propriété et«contient()"Méthode, le"getElementsByTagName ()" et "correspondre()«Méthodes, ou le«jquery"Peut être utilisé pour vérifier si un corps a une classe spécifique en utilisant JavaScript. Ces approches peuvent être utilisées pour rechercher la classe particulière dans un élément en se référant directement à l'élément correspondant, par sa balise, ou en utilisant la méthode jQuery. Ce blog a expliqué pour vérifier si un corps a une classe spécifique en javascript