Cet article dé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 :
- ' classList « propriété et » contient() ' méthode.
- ' getElementsByTagName() ' et ' match() ” méthodes.
- ' jQuery ”.
Illustrons chacune des approches une par une !
Approche 1 : vérifier si le corps a une classe spécifique en JavaScript à l'aide de la propriété classList et des méthodes contains()
La ' classList ” 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 ( nu )
Dans la syntaxe ci-dessus :
- ' nu » correspond au nœud descendant du nœud associé.
Exemple
Ayons un aperçu de l'exemple ci-dessous :
< centre >< corps classer = 'contenir' >
< h2 > Ceci est le site Web de Linuxhint h2 >
centre > corps >
< type de scénario = 'texte/javascript' >
si ( document. corps . classList . contient ( 'contenir' ) ) {
console. Journal ( 'L'élément corps a de la classe' ) ;
}
autre {
console. Journal ( 'L'élément body n'a pas de classe' ) ;
}
scénario >
Appliquez les étapes ci-dessous, comme indiqué dans le code ci-dessus :
- Tout d'abord, incluez un '
' élément ayant l'attribut set ' classer ”. - Ajoutez également un titre dans l'élément particulier ( ).
- Dans le code JS, appliquez le ' classList ” propriété combinée avec le “ contient() ' méthode.
- Cela aura pour conséquence d'accéder à la classe du '
” élément basé sur le nom de classe spécifié dans le paramètre de la méthode. - À la condition satisfaite, le ' si ” la condition s'exécutera.
- Au contraire, le « autre ” le bloc de code d'instruction s'exécutera.
Production
Dans la sortie ci-dessus, on peut voir que la classe particulière est incluse dans le '
Approche 2 : vérifier si le corps a une classe spécifique en JavaScript à l'aide des méthodes getElementsByTagName() et match()
La ' getElementsByTagName() ” donne une collection de tous les éléments ayant un nom de balise particulier. La ' match() ” 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 ( étiquette )Dans la syntaxe fournie :
- ' étiquette ” représente le nom de la balise de l'élément.
Exemple
L'exemple suivant illustre le concept discuté :
< img source = 'template2.png' la taille = '150px' largeur = '150px' >
centre > corps >
< type de scénario = 'texte/javascript' >
laisser obtenir = document. getElementsByTagName ( 'corps' ) [ 0 ] . nom du cours . match ( /contient/ )
si ( obtenir ) {
console. Journal ( 'L'élément corps a de la classe' ) ;
}
autre {
console. Journal ( 'L'élément body n'a pas de classe' ) ;
}
scénario >
Dans l'extrait de code ci-dessus :
- De même, incluez un '
” élément ayant la classe spécifiée. - Contenez également une image avec les dimensions définies dans l'élément indiqué à 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. - La ' [0] ” indique que le premier élément correspondant à la balise indiquée à l'étape précédente sera récupéré.
- La ' nom du cours ' la propriété et le ' match() ' la méthode correspondra à la classe indiquée dans son paramètre par rapport à la '
' élément. - L'ancienne déclaration dans le ' si ' La condition s'exécutera à la satisfaction de toutes les conditions des étapes précédentes.
- Sinon, cette dernière déclaration sera affichée.
Production
La sortie ci-dessus indique que la condition appliquée pour une classe spécifique est satisfaite.
Approche 3 : vérifier si le corps a une classe spécifique en JavaScript à l'aide de jQuery
Cette approche peut être implémentée pour accéder directement à l'élément requis et localiser simplement la classe spécifique à l'aide de sa méthode.
Exemple
Passons en revue l'exemple ci-dessous :
< centre >< corps classer = 'contient' >
< espace réservé de zone de texte = 'Tapez n'importe quel texte...' > zone de texte >
centre > corps >
si ( $ ( 'corps' ) . aClasse ( 'contient' ) ) {
alerte ( 'L'élément corps a de la classe' )
}
autre {
alerte ( 'L'élément body n'a pas de classe' )
}
scénario >
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 '
” dans l'élément indiqué à l'étape précédente. - Dans le code JS, accédez au '
' élément. Aussi, appliquez le ' aClass() ” pour rechercher la classe indiquée dans l'élément récupéré. - Cela alertera par conséquent l'ancien message sur la condition satisfaite.
- Dans l'autre cas, cette dernière déclaration sera affichée.
Production
La sortie ci-dessus implique que l'exigence souhaitée est atteinte.
Conclusion
La ' classList « propriété et » contient() » méthode, la « getElementsByTagName() ' et ' match() ” méthodes, ou les “ 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é comment vérifier si un corps a une classe spécifique en JavaScript