Ovaj će post objasniti metode za utvrđivanje ima li event.target određenu klasu ili ne pomoću JavaScripta.
Kako provjeriti ima li event.target određenu klasu pomoću JavaScripta?
Da biste utvrdili ima li event.target određenu klasu, upotrijebite sljedeće JavaScript unaprijed definirane metode:
Pogledajmo kako ove metode rade za određivanje klase u događaju.target.
Metoda 1: Provjerite ima li event.target određenu klasu pomoću metode contains().
Da biste utvrdili pripada li element određenoj klasi, koristite ' sadrži () ' metoda ' classList ” objekt. Metoda contains() koristi se za utvrđivanje je li određena stavka prisutna u kolekciji. Njegovi rezultati' pravi ” ako je stavka prisutna, inače daje “ lažno ”. To je najučinkovitiji način za određivanje klase elementa.
Sintaksa
Slijedite dolje navedenu sintaksu kako biste odredili ima li event.target određenu klasu ili ne koristeći metodu contains():
događaj. cilj . classList . sadrži ( 'ime-klase' )U gornjoj sintaksi:
- “ događaj.cilj ” je pokrenuti događaj za koji će se provjeriti sadrži li određenu klasu ili ne.
- ' naziv klase ” identificira naziv CSS klase koja je dio pokrenutog događaja.
Povratna vrijednost
Vraća se' pravi ” ako pokrenuti događaj ima navedenu klasu; inače vraća ' lažno ”.
Primjer
Prvo stvorite tri ' div ” elemenata u HTML datoteci koristeći HTML Stilizirajte elemente pomoću CSS stila. Da biste to učinili, stvorite CSS klasu ' .div ” za sve div elemente: Stvoriti ' .centar ” klasa za postavljanje elemenata u središte stranice: Sada, za stiliziranje, svaki div pojedinačno stvara CSS klasu za sebe. Za prvi div postavite boju pozadine ' Crvena ' u ' div1Stil ” klasa: Za drugi div postavite boju pozadine ' rotkvica ružičasta ' koristiti ' rgba(194, 54, 77) ' kod u ' div2Stil ” klasa: Postavite boju pozadine “ ružičasta ' trećeg diva stvaranjem ' div3Stil ” klasa: Nakon pokretanja gornjeg HTML koda, izlaz će izgledati ovako: Sada, u JavaScript datoteci ili ' skripta ” upotrijebite donji kod da provjerite ima li event.target određenu klasu ili ne: U gornjem isječku koda: Izlaz Gornji GIF pokazuje da div1 sadrži ' centar 'razred kako pokazuje' pravi ', dok div2 i div3 prikazuju ' lažno ' u okviru upozorenja, što znači da ne sadrže ' centar ” razred. Druga JavaScript unaprijed definirana metoda pod nazivom ' odgovara() ” može se koristiti za provjeru pripada li određena klasa elementu ili događaju. ' naziv klase ” je jedini parametar potreban za određivanje uključuje li element ili ciljni događaj određenu klasu ili ne. Sintaksa Dolje navedena sintaksa koristi se za metodu matches(): U gornjoj sintaksi, Povratna vrijednost Ako ciljni događaj ima klasu, vraća ' pravi ' inače, ' lažno ” se vraća. U JavaScript datoteci ili oznaci skripte upotrijebite donje retke koda da provjerite ima li event.target određenu klasu ili ne pomoću ' odgovara() ” metoda: U gornjim redcima koda: Izlaz Gornji GIF pokazuje da samo div3 sadrži ' div3Stil 'razred kako pokazuje' pravi ”. Da biste utvrdili ima li pokrenuti događaj određenu klasu, upotrijebite JavaScript ' sadrži () ' metoda ili ' odgovara() ” metoda. Međutim, metoda contains() jedan je od najkorisnijih pristupa koji se koristi za određivanje klase elementa. Obje metode vraćaju ' pravi ” ako pokrenuti događaj ima klasu else ” lažno ” se vraća. Ovaj post objasnio je metode za utvrđivanje ima li event.target određenu klasu ili ne pomoću JavaScripta.
< div razreda = 'div div2Style' iskaznica = 'div2' > dva
< div razreda = 'div div3Style' iskaznica = 'div3' > 3
div >
div >
div >
podstava : 10 px ;
visina : 100 px ;
širina : 100 px ;
margina : 10 px ;
}
margina : auto ;
}
{
pozadina - boja : Crvena ;
}
{
pozadina - boja : rgb ( 194 , 54 , 77 ) ;
}
{
pozadina - boja : ružičasta ;
}
gdje hasClass = događaj. cilj . classList . sadrži ( 'centar' ) ;
uzbuna ( 'Ovaj div sadrži 'centar' klasu: ' + hasClass ) ;
} ) ;
Metoda 2: Provjerite ima li event.target određenu klasu pomoću metode matches().
Primjer
gdje hasClass = događaj. cilj . šibice ( '.div3Style' ) ;
uzbuna ( 'Ova klasa diva odgovara klasi 'div3Style': ' + hasClass ) ;
} ) ;
Zaključak