Dette innlegget vil forklare metodene for å finne ut om event.target har en bestemt klasse eller ikke bruker JavaScript.
Hvordan sjekke om event.target har en spesifikk klasse ved å bruke JavaScript?
For å finne ut om event.target har en bestemt klasse, bruk følgende forhåndsdefinerte JavaScript-metoder:
La oss se hvordan disse metodene fungerer for å bestemme klasse i et event.target.
Metode 1: Sjekk om event.target har en spesifikk klasse ved å bruke contains()-metoden
For å finne ut om et element tilhører en bestemt klasse, bruk ' inneholder() ' metoden for ' klasseliste ' objekt. Metoden contains() brukes til å identifisere om et spesifisert element er til stede i samlingen. Utgangene ' ekte ' hvis varen er til stede, ellers, gir den ' falsk '. Det er den mest effektive måten for å bestemme et elements klasse.
Syntaks
Følg syntaksen nedenfor for å finne ut om event.target har en spesifikk klasse eller ikke ved å bruke contains()-metoden:
begivenhet. mål . klasseliste . inneholder ( 'klassenavn' )I syntaksen ovenfor:
- ' event.target ” er en utløst hendelse som vil bli sjekket om den inneholder den spesifikke klassen eller ikke.
- « klassenavn ” identifiserer navnet på CSS-klassen som er en del av den utløste hendelsen.
Returverdi
Den kommer tilbake' ekte ” hvis den utløste hendelsen har den spesifiserte klassen; ellers returnerer den ' falsk '.
Eksempel
Lag først tre ' div '-elementer i en HTML-fil ved hjelp av HTML Stil elementene med CSS-styling. For å gjøre det, opprett en CSS-klasse ' .div ' for alle div-elementene: Lage en ' .senter ” klasse for å sette elementene i midten av siden: Nå, for styling, lager hver div individuelt en CSS-klasse for dem. For den første div, sett bakgrunnsfargen ' rød ' i ' div1 Stil ' klasse: For den andre div, angi bakgrunnsfargen ' reddik rosa ' bruker ' rgba(194, 54, 77) ' koden i ' div2-stil ' klasse: Sett bakgrunnsfargen ' rosa ' av den tredje div ved å lage ' div3-stil ' klasse: Etter å ha kjørt HTML-koden ovenfor, vil utdataene se slik ut: Nå, i en JavaScript-fil eller en ' manus ”-taggen, bruk koden nedenfor for å sjekke om event.target har en spesifikk klasse eller ikke: I kodebiten ovenfor: Produksjon GIF-en ovenfor viser at div1 inneholder ' senter ' klasse som den viser ' ekte ', mens div2 og div3 viser ' falsk ' i varslingsboksen, noe som betyr at de ikke inneholder ' senter ' klasse. En annen forhåndsdefinert JavaScript-metode kalt ' fyrstikker() ” kan brukes til å sjekke om en bestemt klasse tilhører et element eller en hendelse. « klassenavn ” er den eneste parameteren som trengs for å bestemme om et element eller en målhendelse inkluderer en bestemt klasse eller ikke. Syntaks Den nedenfor gitte syntaksen brukes for matches()-metoden: I syntaksen ovenfor, Returverdi Hvis målhendelsen har en klasse, returnerer den ' ekte 'annet', falsk ' returneres. I en JavaScript-fil eller en skript-tag, bruk kodelinjene nedenfor for å sjekke om event.target har en bestemt klasse eller ikke ved å bruke ' fyrstikker() ' metode: I kodelinjene ovenfor: Produksjon GIF-en ovenfor viser at bare div3 inneholder ' div3-stil ' klasse som den viser ' ekte '. For å finne ut om en utløst hendelse har en spesifisert klasse, bruk JavaScript ' inneholder() '-metoden eller ' fyrstikker() 'metoden. Imidlertid er contains()-metoden en av de mest nyttige tilnærmingene som brukes til å bestemme et elements klasse. Begge metodene returnerer ' ekte ' hvis den utløste hendelsen har en annen klasse ' falsk ' returneres. Dette innlegget forklarte metodene for å finne ut om event.target har en bestemt klasse eller ikke bruker JavaScript.
< div klasse = 'div div2Style' id = 'div2' > to
< div klasse = 'div div3Style' id = 'div3' > 3
div >
div >
div >
polstring : 10 piksler ;
høyde : 100 piksler ;
bredde : 100 piksler ;
margin : 10 piksler ;
}
margin : auto ;
}
{
bakgrunn - farge : rød ;
}
{
bakgrunn - farge : rgb ( 194 , 54 , 77 ) ;
}
{
bakgrunn - farge : rosa ;
}
hvor har Klasse = begivenhet. mål . klasseliste . inneholder ( 'senter' ) ;
varsling ( 'Denne div inneholder 'center'-klassen: ' + harKlasse ) ;
} ) ;
Metode 2: Sjekk om event.target har en spesifikk klasse ved å bruke matches()-metoden
Eksempel
hvor har Klasse = begivenhet. mål . fyrstikker ( '.div3Style' ) ;
varsling ( 'Klassen til denne divisjonen samsvarer med 'div3Style'-klassen: ' + harKlasse ) ;
} ) ;
Konklusjon