Această postare va explica metodele pentru a determina dacă event.target are o anumită clasă sau nu utilizează JavaScript.
Cum se verifică dacă event.target are o clasă specifică folosind JavaScript?
Pentru a determina dacă event.target are o anumită clasă, utilizați următoarele metode predefinite JavaScript:
Să vedem cum funcționează aceste metode pentru determinarea clasei într-un event.target.
Metoda 1: Verificați dacă event.target are o clasă specifică Folosind metoda contains().
Pentru a determina dacă un element aparține unei anumite clase, utilizați „ conține() ” metoda “ classList ' obiect. Metoda contains() este utilizată pentru a identifica dacă un articol specificat este prezent în colecție. Ieșirile sale „ Adevărat „dacă articolul este prezent, în caz contrar, dă „ fals ”. Este cea mai eficientă modalitate de a determina clasa unui element.
Sintaxă
Urmați sintaxa de mai jos pentru a determina dacă event.target are o anumită clasă sau nu folosind metoda contains():
eveniment. ţintă . classList . conţine ( 'numele clasei' )În sintaxa de mai sus:
- „ eveniment.ţintă ” este un eveniment declanșat care va fi verificat dacă conține sau nu clasa specifică.
- „ numele clasei ” identifică numele clasei CSS care face parte din evenimentul declanșat.
Valoare returnată
Se intoarce” Adevărat ” dacă evenimentul declanșat are clasa specificată; altfel, revine” fals ”.
Exemplu
Mai întâi, creați trei „ div ” elemente dintr-un fișier HTML folosind HTML Stilați elementele folosind stilul CSS. Pentru a face acest lucru, creați o clasă CSS „ .div ” pentru toate elementele div: Creeaza o ' .centru ” clasa pentru setarea elementelor în centrul paginii: Acum, pentru stil, fiecare div creează individual o clasă CSS pentru ei. Pentru primul div, setați culoarea de fundal „ roșu ' în ' div1Style ” clasa: Pentru al doilea div, setați culoarea de fundal „ roz ridiche ' folosind ' rgba(194, 54, 77) „codul din „ div2Style ” clasa: Setați culoarea de fundal „ roz ” din a treia div prin crearea „ div3Style ” clasa: După rularea codului HTML de mai sus, rezultatul va arăta astfel: Acum, într-un fișier JavaScript sau într-un „ scenariu ”, utilizați codul furnizat mai jos pentru a verifica dacă event.target are o anumită clasă sau nu: În fragmentul de cod de mai sus: Ieșire GIF-ul de mai sus arată că div1 conține „ centru ” clasa așa cum arată ” Adevărat ”, în timp ce div2 și div3 afișează „ fals ” în caseta de alertă, ceea ce înseamnă că nu conțin „ centru ” clasa. O altă metodă predefinită JavaScript numită „ chibrituri() ” poate fi folosit pentru a verifica dacă o anumită clasă aparține unui element sau unui eveniment. „ numele clasei ” este singurul parametru necesar pentru a determina dacă un element sau un eveniment țintă include sau nu o anumită clasă. Sintaxă Sintaxa de mai jos este utilizată pentru metoda matchs(): În sintaxa de mai sus, Valoare returnată Dacă evenimentul țintă are o clasă, returnează „ Adevărat 'altfel,' fals ” este returnat. Într-un fișier JavaScript sau o etichetă de script, utilizați rândurile de cod de mai jos pentru a verifica dacă evenimentul.target are sau nu o anumită clasă, folosind „ chibrituri() ” metoda: În rândurile de cod de mai sus: Ieșire GIF-ul de mai sus arată că numai div3 conține „ div3Style ” clasa așa cum arată ” Adevărat ”. Pentru a determina dacă un eveniment declanșat are o clasă specificată, utilizați JavaScript „ conține() ” sau metoda ” chibrituri() ” metoda. Cu toate acestea, metoda contains() este una dintre cele mai utile abordări utilizate pentru a determina clasa unui element. Ambele metode returnează „ Adevărat ” dacă evenimentul declanșat are o clasă altfel ” fals ” este returnat. Această postare a explicat metodele pentru a determina dacă event.target are o anumită clasă sau nu utilizează JavaScript.
< div clasă = 'div div2Style' id = 'div2' > Două
< div clasă = 'div div3Style' id = 'div3' > 3
div >
div >
div >
căptușeală : 10px ;
înălţime : 100px ;
lăţime : 100px ;
marginea : 10px ;
}
marginea : auto ;
}
{
fundal - culoare : roșu ;
}
{
fundal - culoare : rgb ( 194 , 54 , 77 ) ;
}
{
fundal - culoare : roz ;
}
unde areClass = eveniment. ţintă . classList . conţine ( 'centru' ) ;
alerta ( „Acest div conține clasa „centrală”: „ + areClass ) ;
} ) ;
Metoda 2: Verificați dacă event.target are o clasă specifică folosind metoda matchs().
Exemplu
unde areClass = eveniment. ţintă . chibrituri ( „.div3Style” ) ;
alerta ( „Clasa acestui div se potrivește cu clasa „div3Style”: „ + areClass ) ;
} ) ;
Concluzie