Ce post expliquera les méthodes pour déterminer si event.target a une classe particulière ou non en utilisant JavaScript.
Comment vérifier si event.target a une classe spécifique en utilisant JavaScript ?
Pour déterminer si event.target a une classe particulière, utilisez les méthodes JavaScript prédéfinies suivantes :
Voyons comment ces méthodes fonctionnent pour déterminer la classe dans un event.target.
Méthode 1 : Vérifiez si event.target a une classe spécifique à l'aide de la méthode contains()
Pour déterminer si un élément appartient à une classe spécifique, utilisez le ' contient() 'méthode de la' classList ' objet. La méthode contains() est utilisée pour identifier si un élément spécifié est présent dans la collection. Ses sorties » vrai ' si l'item est présent, sinon, ça donne ' faux ”. C'est le moyen le plus efficace pour déterminer la classe d'un élément.
Syntaxe
Suivez la syntaxe ci-dessous pour déterminer si event.target a une classe spécifique ou non en utilisant la méthode contains() :
un événement. cible . classList . contient ( 'nom du cours' )Dans la syntaxe ci-dessus :
- ' événement.cible ” est un événement déclenché qui sera vérifié s'il contient ou non la classe spécifique.
- La ' nom du cours ” identifie le nom de la classe CSS qui fait partie de l'événement déclenché.
Valeur de retour
Il revient ' vrai ” si l'événement déclenché a la classe spécifiée ; sinon, il renvoie ' faux ”.
Exemple
Tout d'abord, créez trois ' div ” éléments dans un fichier HTML utilisant le code HTML Stylez les éléments à l'aide du style CSS. Pour cela, créez une classe CSS ' .div ” pour tous les éléments div : Créer un ' .centre ” classe pour définir les éléments au centre de la page : Maintenant, pour le style, chaque div crée individuellement une classe CSS pour eux. Pour la première div, définissez la couleur d'arrière-plan ' rouge ' dans le ' div1Style ' classer: Pour la deuxième div, définissez la couleur d'arrière-plan ' radis rose ' en utilisant le ' RVB(194, 54, 77) ' code dans le ' div2Style ' classer: Définissez la couleur de fond ' rose ' de la troisième div en créant le ' div3Style ' classer: Après avoir exécuté le code HTML ci-dessus, la sortie ressemblera à ceci : Maintenant, dans un fichier JavaScript ou un ' scénario ', utilisez le code fourni ci-dessous pour vérifier si event.target a une classe spécifique ou non : Dans l'extrait de code ci-dessus : Production Le GIF ci-dessus montre que div1 contient le ' centre « la classe comme ça se voit » vrai », tandis que div2 et div3 affichent « faux ' dans la boîte d'alerte, ce qui signifie qu'ils ne contiennent pas le ' centre ' classer. Une autre méthode JavaScript prédéfinie appelée ' allumettes() ” peut être utilisé pour vérifier si une classe spécifique appartient à un élément ou à un événement. La ' nom du cours ” est le seul paramètre nécessaire pour déterminer si un élément ou un événement cible inclut ou non une certaine classe. Syntaxe La syntaxe ci-dessous est utilisée pour la méthode matches() : Dans la syntaxe ci-dessus, Valeur de retour Si l'événement cible a une classe, il renvoie ' vrai ' autre, ' faux » est retourné. Dans un fichier JavaScript ou une balise de script, utilisez les lignes de code ci-dessous pour vérifier si event.target a une classe spécifique ou non en utilisant le ' allumettes() ' méthode: Dans les lignes de code ci-dessus : Production Le GIF ci-dessus montre que seul div3 contient le ' div3Style « la classe comme ça se voit » vrai ”. Pour déterminer si un événement déclenché a une classe spécifiée, utilisez le JavaScript ' contient() » ou la méthode « allumettes() ' méthode. Cependant, la méthode contains() est l'une des approches les plus utiles pour déterminer la classe d'un élément. Les deux méthodes renvoient ' vrai ' si l'événement déclenché a une classe else ' faux » est retourné. Ce post a expliqué les méthodes pour déterminer si event.target a une classe particulière ou non en utilisant JavaScript.
< div classer = 'div div2Style' identifiant = 'div2' > deux
< div classer = 'div div3Style' identifiant = 'div3' > 3
div >
div >
div >
rembourrage : 10px ;
la taille : 100px ;
largeur : 100px ;
marge : 10px ;
}
marge : auto ;
}
{
Contexte - Couleur : rouge ;
}
{
Contexte - Couleur : RVB ( 194 , 54 , 77 ) ;
}
{
Contexte - Couleur : rose ;
}
où a la classe = un événement. cible . classList . contient ( 'centre' ) ;
alerte ( 'Cette div contient la classe 'center' : ' + aClasse ) ;
} ) ;
Méthode 2 : Vérifiez si event.target a une classe spécifique à l'aide de la méthode matches()
Exemple
où a la classe = un événement. cible . allumettes ( '.div3Style' ) ;
alerte ( 'La classe de cette div correspond à la classe 'div3Style' : ' + aClasse ) ;
} ) ;
Conclusion