Maison > interface Web > js tutoriel > le corps du texte

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

Linda Hamilton
Libérer: 2024-11-13 00:57:02
original
538 Les gens l'ont consulté

How to Check if an Element Contains a Specific Class in JavaScript?

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

Lorsque vous travaillez avec des éléments en JavaScript, il est souvent utile de vérifier si un élément contient une classe spécifique.

Le problème :

Utiliser le traditionnel La méthode de comparaison de la propriété className de l'élément avec le nom exact de la classe entraîne des faux positifs lorsque l'élément contient plusieurs classes. Par exemple, si l'élément a la classe class1 et que le code vérifie la classe1, il renverra false si l'élément a également d'autres classes.

La solution : element.classList.contains()

La solution moderne consiste à utiliser la méthode element.classList.contains(), qui renvoie true si l'élément contient le spécifié class.

Cette méthode fonctionne sur tous les principaux navigateurs et propose des polyfills pour les navigateurs plus anciens.

Alternative : indexOf() avec Modification

Pour la compatibilité avec les anciens navigateurs, la méthode indexOf() peut être utilisée, mais elle nécessite une légère modification pour éviter les faux points positifs :

Appliqué à l'exemple

À l'aide de la méthode classList.contains(), le code fourni peut être simplifié en :

Cette approche élimine la redondance et fournit une vérification plus robuste de la présence en classe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal