Tento príspevok vysvetlí metódy na určenie, či event.target má konkrétnu triedu alebo nepoužíva JavaScript.
Ako skontrolovať, či event.target má špecifickú triedu pomocou JavaScriptu?
Ak chcete zistiť, či má event.target konkrétnu triedu, použite nasledujúce preddefinované metódy JavaScript:
Pozrime sa, ako tieto metódy fungujú na určenie triedy v event.target.
Metóda 1: Skontrolujte, či event.target má špecifickú triedu pomocou metódy obsahuje().
Ak chcete zistiť, či prvok patrí do špecifickej triedy, použite „ obsahuje() “metóda “ classList “objekt. Metóda obsahuje() sa používa na identifikáciu toho, či sa v kolekcii nachádza zadaná položka. Jeho výstupy“ pravda “ak je položka prítomná, inak uvádza “ falošný “. Je to najefektívnejší spôsob určenia triedy prvku.
Syntax
Postupujte podľa syntaxe uvedenej nižšie a zistite, či má event.target špecifickú triedu alebo nie, pomocou metódy obsahuje():
udalosť. cieľ . classList . obsahuje ( 'názov-triedy' )Vo vyššie uvedenej syntaxi:
- “ udalosť.cieľ ” je spustená udalosť, pri ktorej sa skontroluje, či obsahuje konkrétnu triedu alebo nie.
- ' class-name ” identifikuje názov triedy CSS, ktorá je súčasťou spúšťanej udalosti.
Návratová hodnota
Vracia sa' pravda ” ak má spustená udalosť špecifikovanú triedu; inak sa vráti „ falošný “.
Príklad
Najprv vytvorte tri „ div ” prvky v súbore HTML pomocou HTML Upravte štýl prvkov pomocou štýlu CSS. Ak to chcete urobiť, vytvorte triedu CSS “ .div ” pre všetky prvky div: Vytvor ' .stred ” trieda pre nastavenie prvkov v strede stránky: Teraz, pre štýl, každý div samostatne vytvorí pre nich triedu CSS. Pre prvý div nastavte farbu pozadia “ červená “ v „ div1Style ' trieda: Pre druhý div nastavte farbu pozadia “ reďkovka ružová “ pomocou „ rgba(194, 54, 77) “kód v “ div2Style ' trieda: Nastaviť farbu pozadia “ Ružová “ tretieho div vytvorením „ div3Style ' trieda: Po spustení vyššie uvedeného HTML kódu bude výstup vyzerať takto: Teraz v súbore JavaScript alebo „ skript ” pomocou nižšie uvedeného kódu skontrolujte, či event.target má špecifickú triedu alebo nie: Vo vyššie uvedenom útržku kódu: Výkon Vyššie uvedený GIF ukazuje, že div1 obsahuje „ stred “trieda, ako ukazuje” pravda “, zatiaľ čo div2 a div3 zobrazujú “ falošný “ vo výstražnom poli, čo znamená, že neobsahujú „ stred ' trieda. Ďalšia preddefinovaná metóda JavaScript s názvom „ zápasy() ” možno použiť na kontrolu, či konkrétna trieda patrí k prvku alebo udalosti. ' class-name ” je jediný parameter potrebný na určenie, či prvok alebo cieľová udalosť obsahuje určitú triedu alebo nie. Syntax Nižšie uvedená syntax sa používa pre metódu match(): Vo vyššie uvedenej syntaxi Návratová hodnota Ak má cieľová udalosť triedu, vráti „ pravda “inak,” falošný “ sa vráti. V súbore JavaScript alebo v značke skriptu použite nižšie uvedené riadky kódu na kontrolu, či event.target má alebo nemá špecifickú triedu pomocou „ zápasy() “ metóda: Vo vyššie uvedených riadkoch kódu: Výkon Vyššie uvedený GIF ukazuje, že iba div3 obsahuje „ div3Style “trieda, ako ukazuje” pravda “. Ak chcete zistiť, či má spustená udalosť špecifikovanú triedu, použite kód JavaScript „ obsahuje() “ metóda alebo “ zápasy() “. Metóda obsahuje() je však jedným z najužitočnejších prístupov používaných na určenie triedy prvku. Obe metódy vrátia „ pravda “ ak má spustená udalosť triedu else “ falošný “ sa vráti. Tento príspevok vysvetľuje metódy na určenie, či event.target má konkrétnu triedu alebo nie pomocou JavaScriptu.
< div trieda = 'div div2Style' id = 'div2' > dva
< div trieda = 'div div3Style' id = 'div3' > 3
div >
div >
div >
vypchávka : 10 pixelov ;
výška : 100 pixelov ;
šírka : 100 pixelov ;
marža : 10 pixelov ;
}
marža : auto ;
}
{
pozadie - farba : červená ;
}
{
pozadie - farba : rgb ( 194 , 54 , 77 ) ;
}
{
pozadie - farba : Ružová ;
}
kde máTrieda = udalosť. cieľ . classList . obsahuje ( 'centrum' ) ;
upozorniť ( 'Tento div obsahuje 'stredovú' triedu: ' + hasClass ) ;
} ) ;
Metóda 2: Skontrolujte, či event.target má špecifickú triedu pomocou metódy zápasov().
Príklad
kde máTrieda = udalosť. cieľ . zápasy ( „.div3Style“ ) ;
upozorniť ( 'Trieda tejto div sa zhoduje s triedou 'div3Style': ' + hasClass ) ;
} ) ;
Záver