Bài đăng này sẽ giải thích các phương pháp để xác định xem event.target có một lớp cụ thể hay không sử dụng JavaScript.
Làm cách nào để kiểm tra xem event.target có Lớp cụ thể bằng JavaScript không?
Để xác định xem event.target có một lớp cụ thể hay không, hãy sử dụng các phương thức xác định trước JavaScript sau:
Hãy xem cách các phương thức này hoạt động để xác định lớp trong event.target.
Phương pháp 1: Kiểm tra xem event.target có Lớp cụ thể hay không bằng Phương thức chứa ()
Để xác định xem một phần tử có thuộc về một lớp cụ thể hay không, hãy sử dụng “ chứa() ” phương pháp của “ danh sách lớp học ' sự vật. Phương thức chứa () được sử dụng để xác định xem một mục được chỉ định có trong bộ sưu tập hay không. Đầu ra của nó “ thật ” nếu vật phẩm hiện diện, nếu không, nó mang lại “ sai ”. Đó là cách hiệu quả nhất để xác định lớp của phần tử.
cú pháp
Thực hiện theo cú pháp dưới đây để xác định xem event.target có một lớp cụ thể hay không bằng cách sử dụng phương thức contains():
biến cố. Mục tiêu . danh sách lớp học . chứa ( 'tên lớp' )Trong cú pháp trên:
- “ sự kiện.mục tiêu ” là một sự kiện được kích hoạt sẽ được kiểm tra xem nó có chứa lớp cụ thể hay không.
- Các ' tên lớp ” xác định tên của lớp CSS là một phần của sự kiện được kích hoạt.
Giá trị trả về
Nó trở lại ' thật ” nếu sự kiện được kích hoạt có lớp được chỉ định; nếu không, nó trả về “ sai ”.
Thí dụ
Đầu tiên, tạo ba “ div ” các phần tử trong tệp HTML bằng cách sử dụng HTML Tạo kiểu cho các phần tử bằng cách sử dụng kiểu CSS. Để làm như vậy, hãy tạo một lớp CSS “ .div ” cho tất cả các phần tử div: Tạo một ' .trung tâm ” lớp để đặt các phần tử ở giữa trang: Bây giờ, để tạo kiểu, mỗi div sẽ tạo riêng một lớp CSS cho chúng. Đối với div đầu tiên, hãy đặt màu nền “ màu đỏ ' bên trong ' div1Style ' lớp: Đối với div thứ hai, hãy đặt màu nền “ củ cải hồng ' sử dụng ' rgb(194, 54, 77) ” mã trong “ div2Style ' lớp: Đặt màu nền “ Hồng ” của div thứ ba bằng cách tạo “ div3Style ' lớp: Sau khi chạy mã HTML ở trên, đầu ra sẽ như thế này: Bây giờ, trong một tệp JavaScript hoặc một “ script ”, hãy sử dụng mã được cung cấp bên dưới để kiểm tra xem event.target có một lớp cụ thể hay không: Trong đoạn mã trên: đầu ra Ảnh GIF ở trên cho thấy div1 chứa “ trung tâm ” đẳng cấp như nó cho thấy “ thật ”, trong khi div2 và div3 hiển thị “ sai ” trong hộp cảnh báo, có nghĩa là chúng không chứa “ trung tâm ' lớp. Một phương thức được xác định trước khác của JavaScript có tên là “ diêm() ” có thể được sử dụng để kiểm tra xem một lớp cụ thể có thuộc về một phần tử hoặc một sự kiện hay không. Các ' tên lớp ” là tham số duy nhất cần thiết để xác định xem một phần tử hoặc một sự kiện đích có bao gồm một lớp nhất định hay không. cú pháp Cú pháp dưới đây được sử dụng cho phương thức Match(): Trong cú pháp trên, Giá trị trả về Nếu sự kiện đích có một lớp, nó sẽ trả về “ thật ' khác, ' sai ' Được trả lại. Trong tệp JavaScript hoặc thẻ tập lệnh, hãy sử dụng các dòng mã bên dưới để kiểm tra xem event.target có một lớp cụ thể hay không bằng cách sử dụng “ diêm() ' phương pháp: Trong các dòng mã trên: đầu ra GIF ở trên cho thấy rằng chỉ có div3 chứa “ div3Style ” đẳng cấp như nó cho thấy “ thật ”. Để xác định xem một sự kiện được kích hoạt có một lớp được chỉ định hay không, hãy sử dụng JavaScript “ chứa() ” phương pháp hoặc “ diêm() ' phương pháp. Tuy nhiên, phương thức chứa () là một trong những cách tiếp cận hữu ích nhất được sử dụng để xác định lớp của phần tử. Cả hai phương thức đều trả về “ thật ” nếu sự kiện được kích hoạt có một lớp khác “ sai ' Được trả lại. Bài đăng này đã giải thích các phương pháp để xác định xem event.target có một lớp cụ thể hay không sử dụng JavaScript.
< div lớp = 'div div2Style' Tôi = 'div2' > hai
< div lớp = 'div div3Style' Tôi = 'div3' > 3
div >
div >
div >
đệm : 10px ;
Chiều cao : 100px ;
bề rộng : 100px ;
lề : 10px ;
}
lề : Tự động ;
}
{
lai lịch - màu sắc : màu đỏ ;
}
{
lai lịch - màu sắc : rgb ( 194 , 54 , 77 ) ;
}
{
lai lịch - màu sắc : Hồng ;
}
nơi hasClass = biến cố. Mục tiêu . danh sách lớp học . chứa ( 'trung tâm' ) ;
báo động ( 'Div này chứa lớp 'trung tâm':' + hasClass ) ;
} ) ;
Phương pháp 2: Kiểm tra xem event.target có Lớp cụ thể hay không bằng cách sử dụng phương thức Match()
Thí dụ
nơi hasClass = biến cố. Mục tiêu . diêm ( '.div3Style' ) ;
báo động ( 'Lớp của div này khớp với lớp 'div3Style': ' + hasClass ) ;
} ) ;
Sự kết luận