Ta objava bo pojasnila metode za ugotavljanje, ali ima event.target določen razred ali ne z uporabo JavaScripta.
Kako preveriti, ali ima event.target poseben razred z uporabo JavaScripta?
Če želite ugotoviti, ali ima event.target določen razred, uporabite naslednje vnaprej določene metode JavaScript:
Poglejmo, kako te metode delujejo za določanje razreda v event.target.
1. način: Preverite, ali ima event.target poseben razred z uporabo metode contains().
Če želite ugotoviti, ali element pripada določenemu razredu, uporabite » vsebuje() ' metoda ' classList ” predmet. Metoda contains() se uporablja za identifikacijo, ali je podana postavka prisotna v zbirki. Njegovi rezultati ' prav ” če je element prisoten, sicer daje “ lažno ”. Je najučinkovitejši način za določanje razreda elementa.
Sintaksa
Sledite spodnji sintaksi, da ugotovite, ali ima event.target določen razred ali ne z uporabo metode contains():
dogodek. tarča . classList . vsebuje ( 'ime-razreda' )V zgornji sintaksi:
- “ event.target ” je sproženi dogodek, za katerega bo preverjeno, ali vsebuje določen razred ali ne.
- ' ime razreda ” identificira ime razreda CSS, ki je del sproženega dogodka.
Povratna vrednost
Vrača se' prav ” če ima sproženi dogodek podani razred; sicer se vrne ' lažno ”.
Primer
Najprej ustvarite tri ' div ” v datoteki HTML z uporabo HTML Oblikujte elemente s slogom CSS. Če želite to narediti, ustvarite razred CSS ' .div ” za vse elemente div: Ustvariti ' .center ” za nastavitev elementov na sredini strani: Zdaj za oblikovanje vsak div zase ustvari razred CSS. Za prvi div nastavite barvo ozadja ' rdeča ' v ' div1Slog ” razred: Za drugi div nastavite barvo ozadja ' redkev roza ' uporabljati ' rgba(194, 54, 77) ' koda v ' div2Style ” razred: Nastavite barvo ozadja ' roza ' tretjega diva tako, da ustvarite ' div3Style ” razred: Po zagonu zgornje kode HTML bo rezultat videti takole: Zdaj pa v datoteki JavaScript ali » scenarij ”, uporabite spodnjo kodo, da preverite, ali ima event.target določen razred ali ne: V zgornjem delčku kode: Izhod Zgornji GIF prikazuje, da div1 vsebuje » center 'razred kot kaže' prav «, medtem ko div2 in div3 prikazujeta » lažno « v opozorilnem polju, kar pomeni, da ne vsebujejo » center ” razred. Druga vnaprej določena metoda JavaScript, imenovana ' ujema se() ” lahko uporabite za preverjanje, ali določen razred pripada elementu ali dogodku. ' ime razreda ” je edini parameter, potreben za določitev, ali element ali ciljni dogodek vključuje določen razred ali ne. Sintaksa Za metodo matches() se uporablja spodnja sintaksa: V zgornji sintaksi je Povratna vrednost Če ima ciljni dogodek razred, vrne ' prav 'sicer,' lažno ” se vrne. V datoteki JavaScript ali oznaki skripta uporabite spodnje vrstice kode, da preverite, ali ima event.target določen razred ali ne, tako da uporabite » ujema se() ” metoda: V zgornjih vrsticah kode: Izhod Zgornji GIF prikazuje, da samo div3 vsebuje » div3Style ' razred kot kaže ' prav ”. Če želite ugotoviti, ali ima sproženi dogodek določen razred, uporabite JavaScript ' vsebuje() ' metoda ali ' ujema se() ” metoda. Vendar pa je metoda contains() eden najbolj uporabnih pristopov za določanje razreda elementa. Obe metodi vrneta ' prav ' če ima sproženi dogodek razred else ' lažno ” se vrne. V tej objavi so razložene metode za ugotavljanje, ali ima event.target določen razred ali ne z uporabo JavaScripta.
< div razred = 'div div2Style' id = 'div2' > dva
< div razred = 'div div3Style' id = 'div3' > 3
div >
div >
div >
oblazinjenje : 10 slikovnih pik ;
višina : 100 slikovnih pik ;
premer : 100 slikovnih pik ;
marža : 10 slikovnih pik ;
}
marža : avto ;
}
{
ozadje - barva : rdeča ;
}
{
ozadje - barva : rgb ( 194 , 54 , 77 ) ;
}
{
ozadje - barva : roza ;
}
kjer hasClass = dogodek. tarča . classList . vsebuje ( 'center' ) ;
opozorilo ( 'Ta div vsebuje 'sredinski' razred: ' + hasClass ) ;
} ) ;
2. način: Preverite, ali ima event.target specifičen razred z uporabo metode matches().
Primer
kjer hasClass = dogodek. tarča . tekme ( '.div3Style' ) ;
opozorilo ( 'Razred tega diva se ujema z razredom' div3Style ':' + hasClass ) ;
} ) ;
Zaključek