Dette indlæg vil forklare metoderne til at afgøre, om event.target har en bestemt klasse eller ikke bruger JavaScript.
Hvordan kontrollerer man, om event.target har en specifik klasse ved hjælp af JavaScript?
For at afgøre, om event.target har en bestemt klasse, skal du bruge følgende foruddefinerede JavaScript-metoder:
Lad os se, hvordan disse metoder fungerer til at bestemme klasse i et event.target.
Metode 1: Tjek om event.target har en specifik klasse ved hjælp af contains()-metoden
For at afgøre, om et element tilhører en bestemt klasse, skal du bruge ' indeholder() 'metoden af ' klasseliste ” objekt. Metoden contains() bruges til at identificere, om et specificeret element er til stede i samlingen. Dens udgange ' rigtigt ' hvis varen er til stede, ellers giver den ' falsk ”. Det er den mest effektive måde at bestemme et elements klasse på.
Syntaks
Følg nedenstående syntaks for at bestemme, om event.target har en specifik klasse eller ej ved at bruge contains()-metoden:
begivenhed. mål . klasseliste . indeholder ( 'klassenavn' )I ovenstående syntaks:
- “ begivenhed.mål ” er en udløst hændelse, der vil blive kontrolleret, om den indeholder den specifikke klasse eller ej.
- Det ' klassenavn ” identificerer navnet på den CSS-klasse, der er en del af den udløste hændelse.
Returværdi
Det vender tilbage' rigtigt ” hvis den udløste hændelse har den angivne klasse; ellers vender det tilbage ' falsk ”.
Eksempel
Først skal du oprette tre ' div ”-elementer i en HTML-fil ved hjælp af HTML Style elementerne ved hjælp af CSS-styling. For at gøre det skal du oprette en CSS-klasse ' .div ” for alle div-elementerne: Lave en ' .centrum ” klasse til at indstille elementerne i midten af siden: Nu, til styling, opretter hver div individuelt en CSS-klasse til dem. For den første div skal du indstille baggrundsfarven ' rød ' i ' div1 Stil ' klasse: For den anden div skal du indstille baggrundsfarven ' radise lyserød ' bruger ' rgba(194, 54, 77) ' kode i ' div2-stil ' klasse: Indstil baggrundsfarven ' lyserød ' af den tredje div ved at oprette ' div3 Stil ' klasse: Efter at have kørt ovenstående HTML-kode, vil outputtet se sådan ud: Nu, i en JavaScript-fil eller en ' manuskript ” tag, skal du bruge nedenstående kode til at kontrollere, om event.target har en bestemt klasse eller ej: I ovenstående kodestykke: Produktion Ovenstående GIF viser, at div1 indeholder ' centrum ' klasse som den viser ' rigtigt ', mens div2 og div3 viser ' falsk ' i advarselsboksen, hvilket betyder, at de ikke indeholder ' centrum ' klasse. En anden foruddefineret JavaScript-metode kaldet ' Tændstikker() ” kan bruges til at kontrollere, om en bestemt klasse hører til et element eller en begivenhed. Det ' klassenavn ” er den eneste parameter, der er nødvendig for at bestemme, om et element eller en målhændelse inkluderer en bestemt klasse eller ej. Syntaks Den nedenfor angivne syntaks bruges til matches()-metoden: I ovenstående syntaks, Returværdi Hvis målhændelsen har en klasse, returnerer den ' rigtigt 'andet', falsk ” returneres. I en JavaScript-fil eller et script-tag skal du bruge nedenstående kodelinjer til at kontrollere, om event.target har en bestemt klasse eller ej ved at bruge ' Tændstikker() ” metode: I ovenstående kodelinjer: Produktion Ovenstående GIF viser, at kun div3 indeholder ' div3 Stil ' klasse som det viser ' rigtigt ”. For at afgøre, om en udløst hændelse har en specificeret klasse, skal du bruge JavaScript ' indeholder() '-metoden eller ' Tændstikker() ” metode. Imidlertid er contains()-metoden en af de mest nyttige tilgange, der bruges til at bestemme et elements klasse. Begge metoder returnerer ' rigtigt ' hvis den udløste hændelse har en anden klasse ' falsk ” returneres. Dette indlæg forklarede metoderne til at bestemme, om event.target har en bestemt klasse eller ikke ved hjælp af JavaScript.
< div klasse = 'div div2Style' id = 'div2' > to
< div klasse = 'div div3Style' id = 'div3' > 3
div >
div >
div >
polstring : 10px ;
højde : 100 px ;
bredde : 100 px ;
margen : 10px ;
}
margen : auto ;
}
{
baggrund - farve : rød ;
}
{
baggrund - farve : rgb ( 194 , 54 , 77 ) ;
}
{
baggrund - farve : lyserød ;
}
hvor har Klasse = begivenhed. mål . klasseliste . indeholder ( 'centrum' ) ;
alert ( 'Denne div indeholder 'center' klasse: ' + har Klasse ) ;
} ) ;
Metode 2: Tjek om event.target har en specifik klasse ved hjælp af matches()-metoden
Eksempel
hvor har Klasse = begivenhed. mål . Tændstikker ( '.div3Style' ) ;
alert ( 'Denne divs klasse matcher 'div3Style'-klassen: ' + har Klasse ) ;
} ) ;
Konklusion