Controleer of event.target een specifieke klasse heeft met behulp van JavaScript

Style de elementen met behulp van CSS-styling. Maak hiervoor een CSS-klasse ' .div ” voor alle div-elementen:

Maak een ' .centrum ” klasse voor het instellen van de elementen in het midden van de pagina:

Nu, voor styling, maakt elke div afzonderlijk een CSS-klasse voor hen. Stel voor de eerste div de achtergrondkleur in ' rood ' in de ' div1Stijl ' klas:

Stel voor de tweede div de achtergrondkleur in ' radijs roze ' de ... gebruiken ' RGBA(194, 54, 77) ”-code in de “ div2Stijl ' klas:

Stel de achtergrondkleur in ' roze ” van de derde div door de “ div3Stijl ' klas:

Na het uitvoeren van de bovenstaande HTML-code ziet de uitvoer er als volgt uit:

Nu, in een JavaScript-bestand of een ' script ”-tag, gebruik dan de onderstaande code om te controleren of event.target een specifieke klasse heeft of niet:

In het bovenstaande codefragment:

• Koppel eerst een gebeurtenislistener aan een klikgebeurtenis die elke klik op DOM afhandelt.
• Controleer vervolgens of de getriggerde gebeurtenis de CSS-klasse ' centrum ” of niet met behulp van de “ classLijst.class() ” methode.

Uitgang

De bovenstaande GIF laat zien dat div1 de ' centrum ” klasse zoals het laat zien “ WAAR ”, terwijl div2 en div3 “ vals ' in het waarschuwingsvenster, wat betekent dat ze niet de ' centrum ' klas.

Methode 2: Controleer of event.target een specifieke klasse heeft met behulp van de methode matches().

Een andere vooraf gedefinieerde JavaScript-methode genaamd ' wedstrijden() ” kan worden gebruikt om te controleren of een specifieke klasse bij een element of een gebeurtenis hoort. De ' naam van de klasse ” is de enige parameter die nodig is om te bepalen of een element of een doelgebeurtenis een bepaalde klasse bevat of niet.

Syntaxis

De onderstaande syntaxis wordt gebruikt voor de methode matches():

In de bovenstaande syntaxis,

• “ gebeurtenis.doel ” is een geactiveerde gebeurtenis die wordt gecontroleerd of deze de specifieke klasse bevat of niet.
• De ' naam van de klasse ” geeft de naam aan van de CSS-klasse die deel uitmaakt van de geactiveerde gebeurtenis. De methode matches() neemt de naam van de klasse samen met een punt (.) die het woord ' klas ”.

Winstwaarde

Als de doelgebeurtenis een klasse heeft, retourneert deze ' WAAR ' anders ' vals ” wordt teruggestuurd.

Voorbeeld

Gebruik in een JavaScript-bestand of een scripttag de onderstaande coderegels om te controleren of het event.target een specifieke klasse heeft of niet door de ' wedstrijden() ” methode:

In de bovenstaande regels code:

• Koppel eerst een gebeurtenislistener aan een klikgebeurtenis die elke klik op DOM afhandelt.
• Controleer vervolgens of de “ div3Stijl ' CSS-klasse bestaat in een getriggerde gebeurtenis met behulp van de ' wedstrijden() ” methode.
• Als het aanwezig is, toont de alert() een bericht met ' WAAR ”, anders “ vals ”.

Uitgang

De bovenstaande GIF laat zien dat alleen div3 de ' div3Stijl ” klasse zoals het laat zien “ WAAR ”.

Conclusie

Gebruik JavaScript om te bepalen of een getriggerde gebeurtenis een bepaalde klasse heeft bevat() ” methode of de “ wedstrijden() ” methode. De methode contain() is echter een van de handigste benaderingen die worden gebruikt om de klasse van een element te bepalen. Beide methoden retourneren ' WAAR ” als de getriggerde gebeurtenis een klasse anders heeft “ vals ” wordt teruggestuurd. In dit bericht werden de methoden uitgelegd om te bepalen of event.target een bepaalde klasse heeft of geen JavaScript gebruikt.