Trong giai đoạn thiết kế một trang web hoặc một trang web, có một số tình huống nhất định mà bạn không còn cần phải truy cập vào một số yếu tố cụ thể do một số cập nhật. Hơn nữa, khi cần phải gán nhiều hơn một lớp cho một phần tử cụ thể trong html. Trong các tình huống trường hợp như vậy, việc thay đổi lớp của một phần tử HTML trong JavaScript là rất hữu ích để giải quyết các tình huống như vậy.
Blog này sẽ trình bày các phương pháp cần xem xét khi thay đổi lớp của phần tử HTML trong JavaScript.
Làm thế nào để thay đổi lớp của một phần tử HTML bằng JavaScript?
Để thay đổi lớp của một phần tử HTML bằng JavaScript, có thể áp dụng các phương pháp sau:
-
- “ tên lớp ' tài sản.
- “ classList ' tài sản.
Phương pháp 1: Thay đổi lớp của một phần tử HTML bằng JavaScript bằng cách sử dụng thuộc tính className
Cách tiếp cận này có thể có hiệu lực bằng cách truy cập vào lớp đã tạo được liên kết với một phần tử và gán cho nó một lớp khác.
Ví dụ sau đây thể hiện khái niệm đã nêu.
Thí dụ
Trong mã được cung cấp dưới đây trong “ ”, Bao gồm tiêu đề sau trong thẻ“ ' nhãn. Sau đó, tạo nút được chỉ định sẽ được gán mặc định “ lớp ”Sẽ được thay đổi sau trong mã. Ngoài ra, hãy gán cho nó một “ Tôi ”Và một“ trong một cái nhấp chuột ”Sự kiện gọi hàm Class ().
Sau đó trong mã, hãy bao gồm thông báo sau trong “ ”Để hiển thị nó trên DOM khi chuyển đổi lớp:
Mã HTML:
< thân hình Phong cách = 'text-align: center;' >< h2 > Thay đổi phần tử Tên lớp của
Tên lớp cũ là: lớp mặc định
Trong mã JS, khai báo một hàm có tên “ Lớp() ”. Tại đây, truy cập lớp mặc định theo id của nó bằng cách sử dụng “ document.getElementById () ' phương pháp. Các ' tên lớp Thuộc tính 'sẽ chuyển đổi lớp đã tạo thành lớp có tên' newClass ”.
Cuối cùng ' innerText ”Thuộc tính sẽ hiển thị thông báo sau cùng với lớp đã thay đổi:
Mã JS:
hàm số Lớp ( ) {document.getElementById ( 'myButton' ) .className = 'newClass' ;
var access = document.getElementById ( 'myButton' ) .tên lớp;
document.getElementById ( 'cái đầu' ) .innerHTML = 'Tên lớp mới là:' + quyền truy cập;
}
Đầu ra
Trong đầu ra ở trên, hãy quan sát sự thay đổi của “ lớp ”Ở bên phải khi nhấp vào nút trong DOM.
Phương pháp 2: Thay đổi lớp của một phần tử HTML bằng JavaScript bằng cách sử dụng thuộc tính classList
Cách tiếp cận cụ thể này có thể được thực hiện để loại bỏ lớp được chỉ định và gán một lớp mới cho nó, do đó thay đổi nó.
Thí dụ
Đầu tiên, hãy lặp lại các phương pháp đã thảo luận ở trên để bao gồm một tiêu đề, tạo một nút với lớp được chỉ định, id và sự kiện onclick đính kèm gọi hàm được chỉ định. Tiếp theo, tương tự, thêm phần tiêu đề trong “ ”Để thông báo cho người dùng về lớp đã thay đổi khi nhấp vào nút:
Mã HTML
< thân hình Phong cách = 'text-align: center;' >< h2 > Thay đổi loại nguyên tố ! h2 >
< cái nút lớp = 'Trang mạng' trong một cái nhấp chuột = 'Lớp()' Tôi = 'biến đổi' > Nhấp vào đây cái nút >
< h3 Tôi = 'cái đầu' Phong cách = 'background-color: lightgray;' > Tên lớp cũ là: Website h3 >
thân hình >
Bây giờ, hãy khai báo một hàm có tên là “ Lớp() ”. Theo định nghĩa của nó, hãy áp dụng “ classList ”Cùng với thuộc tính“ gỡ bỏ() Phương thức 'để bỏ qua lớp được truy cập có tên' Trang mạng ”Tương ứng với nút đã tạo.
Trong bước tiếp theo, gán một lớp mới cho cùng một lớp bằng cách sử dụng thuộc tính đã thảo luận với “ cộng() ' phương pháp. Cuối cùng, hiển thị lớp đã thay đổi như đã thảo luận trong phương pháp trước:
Mã JS
hàm số Lớp ( ) {document.getElementById ( 'biến đổi' ) .classList.remove ( 'Trang mạng' )
document.getElementById ( 'biến đổi' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'biến đổi' ) .classList;
document.getElementById ( 'cái đầu' ) .innerHTML = 'Tên lớp mới là:' + quyền truy cập;
}
Đầu ra
Bản viết lên này nhằm xóa bỏ khái niệm về việc thay đổi lớp của phần tử HTML bằng cách sử dụng JavaScript.
Sự kết luận
Các ' tên lớp ' và ' classList ”Có thể được sử dụng để thay đổi lớp của một phần tử HTML. Thuộc tính className dẫn đến một cách tiếp cận nhanh hơn trong việc thực hiện yêu cầu mong muốn so với thuộc tính classList vì nó liên quan đến độ phức tạp mã ít hơn. Mặt khác, thuộc tính classList đã thay đổi lớp mặc định với sự trợ giúp của hai phương thức bổ sung. Bài viết này đã minh họa các cách tiếp cận để thay đổi lớp của phần tử HTML bằng JavaScript.