Bài viết này sẽ trình bày các cách tiếp cận để kiểm tra xem một phần thân có một lớp cụ thể hay không bằng cách sử dụng JavaScript.
Làm cách nào để kiểm tra xem Nội dung có Lớp cụ thể bằng JavaScript không?
Để kiểm tra xem một phần thân có một lớp cụ thể bằng JavaScript hay không, hãy áp dụng các phương pháp sau:
- “ danh sách lớp học ” tài sản và “ chứa() ' phương pháp.
- “ getElementsByTagName() ' và ' cuộc thi đấu() ” phương pháp.
- “ jQuery ”.
Hãy minh họa từng cách tiếp cận một!
Cách tiếp cận 1: Kiểm tra xem Nội dung có Lớp cụ thể trong JavaScript bằng cách sử dụng Thuộc tính classList và Phương thức chứa ()
Các ' danh sách lớp học ” thuộc tính cung cấp tên lớp CSS của một phần tử. Trong khi ' chứa() ” phương thức cho true nếu một nút là con cháu. Các phương thức kết hợp này có thể được áp dụng để truy cập lớp chứa trong phần tử được liên kết.
cú pháp
nút. chứa ( khỏa thân )
Trong cú pháp trên:
- “ khỏa thân ” tương ứng với nút con của nút được liên kết.
Thí dụ
Hãy có một cái nhìn tổng quan về ví dụ dưới đây:
< trung tâm >< thân hình lớp = 'Lưu trữ' >
< h2 > Đây là trang web Linuxhint h2 >
trung tâm > thân hình >
< loại kịch bản = 'văn bản/javascript' >
nếu ( tài liệu. thân hình . danh sách lớp học . chứa ( 'Lưu trữ' ) ) {
bảng điều khiển. đăng nhập ( 'Phần tử cơ thể có lớp' ) ;
}
khác {
bảng điều khiển. đăng nhập ( 'Phần tử cơ thể không có lớp' ) ;
}
script >
Áp dụng các bước được nêu dưới đây, như được đưa ra trong đoạn mã trên:
- Đầu tiên, bao gồm một “ ” phần tử có thuộc tính set “ lớp ”.
- Ngoài ra, hãy thêm một tiêu đề trong phần tử cụ thể ( ).
- Trong mã JS, hãy áp dụng “ danh sách lớp học ” thuộc tính kết hợp với “ chứa() ' phương pháp.
- Kết quả là điều này sẽ truy cập vào lớp của liên kết “ ” phần tử dựa trên tên lớp đã chỉ định trong tham số của phương thức.
- Khi điều kiện được thỏa mãn, “ nếu ” điều kiện sẽ thực thi.
- Ngược lại, “ khác ” khối mã câu lệnh sẽ thực thi.
đầu ra
Trong đầu ra ở trên, có thể thấy rằng lớp cụ thể được bao gồm trong “ ' yếu tố.
Cách tiếp cận 2: Kiểm tra xem Nội dung có Lớp cụ thể trong JavaScript bằng cách sử dụng các Phương thức getElementsByTagName() và match()
Các ' getElementsByTagName() ” phương thức đưa ra một tập hợp tất cả các phần tử có một tên thẻ cụ thể. Các ' cuộc thi đấu() ” khớp với giá trị đã chỉ định với chuỗi. Các phương thức này có thể được sử dụng để truy cập phần tử được yêu cầu bằng thẻ của nó và kiểm tra lớp cụ thể.
cú pháp
tài liệu. getElementsByTagName ( nhãn )Trong cú pháp được cung cấp:
- “ nhãn ” đại diện cho tên thẻ của phần tử.
Thí dụ
Ví dụ sau minh họa khái niệm được thảo luận:
< img src = 'mẫu2.png' Chiều cao = '150px' bề rộng = '150px' >
trung tâm > thân hình >
< loại kịch bản = 'văn bản/javascript' >
để cho lấy = tài liệu. getElementsByTagName ( 'thân hình' ) [ 0 ] . tên lớp . cuộc thi đấu ( /chứa/ )
nếu ( lấy ) {
bảng điều khiển. đăng nhập ( 'Phần tử cơ thể có lớp' ) ;
}
khác {
bảng điều khiển. đăng nhập ( 'Phần tử cơ thể không có lớp' ) ;
}
script >
Trong đoạn mã trên:
- Tương tự như vậy, bao gồm một “ ” phần tử có lớp được chỉ định.
- Ngoài ra, hãy chứa một hình ảnh có kích thước đã đặt trong phần tử đã nêu ở bước trước.
- Trong các dòng mã JavaScript, hãy truy cập vào “ ” phần tử bằng thẻ của nó bằng cách sử dụng “ getElementsByTagName() ' phương pháp.
- Các ' [0] ” chỉ ra rằng phần tử đầu tiên tương ứng với thẻ đã nêu trong bước trước đó sẽ được tìm nạp.
- Các ' tên lớp ” tài sản và “ cuộc thi đấu() ” phương thức sẽ khớp với lớp đã nêu trong tham số của nó so với “ ' yếu tố.
- Tuyên bố trước đây trong “ nếu ” điều kiện sẽ thực hiện khi thỏa mãn tất cả các điều kiện trong các bước trước đó.
- Nếu không, câu lệnh sau sẽ được hiển thị.
đầu ra
Đầu ra ở trên chỉ ra rằng điều kiện áp dụng cho một lớp cụ thể được thỏa mãn.
Cách tiếp cận 3: Kiểm tra xem Nội dung có Lớp cụ thể trong JavaScript bằng jQuery không
Cách tiếp cận này có thể được triển khai để truy cập trực tiếp vào phần tử được yêu cầu và định vị lớp cụ thể đối với nó với sự trợ giúp của phương thức của nó một cách đơn giản.
Thí dụ
Hãy xem qua ví dụ dưới đây:
< trung tâm >< thân hình lớp = 'chứa' >
< trình giữ chỗ textarea = 'Nhập văn bản bất kỳ...' > vùng văn bản >
trung tâm > thân hình >
nếu ( $ ( 'thân hình' ) . hasClass ( 'chứa' ) ) {
báo động ( 'Phần tử cơ thể có lớp' )
}
khác {
báo động ( 'Phần tử cơ thể không có lớp' )
}
script >
Trong các dòng mã trên:
- Bao gồm cái ' jQuery ” thư viện để sử dụng các chức năng của nó.
- Tương tự, bao gồm “ ” phần tử có lớp đã nêu.
- Ngoài ra, hãy thêm một “
” phần tử trong phần tử đã nêu ở bước trước. - Trong mã JS, truy cập vào “ ' yếu tố. Ngoài ra, hãy áp dụng “ hasClass() ” để tìm kiếm lớp đã nêu trong phần tử được tìm nạp.
- Điều này sẽ dẫn đến cảnh báo tin nhắn cũ khi điều kiện thỏa mãn.
- Trong trường hợp khác, câu lệnh sau sẽ được hiển thị.
đầu ra
Đầu ra trên ngụ ý rằng yêu cầu mong muốn đã đạt được.
Sự kết luận
Các ' danh sách lớp học ” tài sản và “ chứa() ” phương pháp, “ getElementsByTagName() ' và ' cuộc thi đấu() ” phương pháp, hoặc “ jQuery ” có thể được sử dụng để kiểm tra xem một phần thân có một lớp cụ thể hay không bằng JavaScript. Các cách tiếp cận này có thể được sử dụng để tìm kiếm lớp cụ thể trong một phần tử bằng cách tham chiếu trực tiếp đến phần tử tương ứng, bằng thẻ của nó hoặc sử dụng phương thức jQuery. Blog này đã giải thích để kiểm tra xem một nội dung có một lớp cụ thể trong JavaScript hay không