Thuộc tính classList trong JavaScript
Bùi Tấn Lực - 917
- 16/09/2025
Chức năng của Thuộc tính classList trong JavaScript
Thuộc tính classList trong JavaScript dùng để thao tác lên các giá trị nằm trong thuộc tính class trên phần tử HTML.
Các phương thức của Thuộc tính classList trong JavaScript
| Phương thức, Thuộc tính | Mô tả |
| Phương thức add() | Dùng để thêm class với một hoặc nhiều giá trị vào một phần tử HTML, nếu phần tử HTML đó đã có class rồi thì vẫn thêm bình thường mà không xóa giá trị của class cũ. |
| Phương thức remove() | Dùng để xóa một hoặc nhiều giá trị trong thuộc tính class trên phần tử HTML, phương thức này chỉ xóa giá trị chứ không xóa thuộc tính class. |
| Phương thức toggle() | Dùng để thực hiện hai hành động thêm và xóa giá trị class lặp đi lặp lại, nếu giá trị class không tồn tại thì sẽ thêm vào, nếu giá trị class tồn tại thì xóa đi. |
| Thuộc tính length | Dùng để đếm số giá trị có trong thuộc tính class trên một phần tử HTML. |
| Phương thức contains() | Dùng để kiểm tra một giá trị có nằm trong thuộc tính class của một phần tử HTML hay không, nếu có sẽ trả về true, nếu không có sẽ trả về false. |
Ứng dụng classList trong JavaScript khi thao tác DOM
classList phát huy hiệu quả khi cần thay đổi trạng thái hoặc giao diện của một phần tử mà không phải viết lại toàn bộ thuộc tính class. Thay vì xử lý chuỗi thủ công, JavaScript có thể thêm, xóa hoặc kiểm tra từng lớp CSS một cách rõ ràng.
Thay đổi giao diện phần tử bằng classList
Một cách sử dụng phổ biến là thêm hoặc loại bỏ class để thay đổi màu sắc, kích thước, trạng thái hoặc cách hiển thị của phần tử. CSS đảm nhận phần giao diện, còn JavaScript chỉ cần quyết định class nào được áp dụng.
button.classList.add('active');
button.classList.remove('disabled');
Cách này giúp mã dễ quản lý hơn, đặc biệt với các thành phần có nhiều trạng thái như nút bấm, menu hoặc tab.
Hiển thị và ẩn phần tử bằng classList
Có thể kết hợp classList với một class CSS chuyên dùng để ẩn phần tử. Khi cần hiển thị, JavaScript loại bỏ class đó; khi muốn ẩn, JavaScript thêm lại.
const menu = document.querySelector('.menu');
menu.classList.add('hidden');
menu.classList.remove('hidden');
Ưu điểm của cách này là phần quy định phần tử hiển thị như thế nào được đặt trong CSS, còn JavaScript chỉ xử lý trạng thái. Điều này phù hợp với menu, hộp thông báo, cửa sổ nội dung hoặc các khu vực cần xuất hiện theo thao tác người dùng.
Tạo nút bật tắt trạng thái với classList
Phương thức toggle() rất phù hợp với những thao tác có hai trạng thái như mở/đóng menu, bật/tắt chế độ hoặc hiển thị/ẩn nội dung. Mỗi lần người dùng tương tác, class sẽ được tự động thêm hoặc loại bỏ.
const button = document.querySelector('.menu-button');
const menu = document.querySelector('.menu');
button.addEventListener('click', () => {
menu.classList.toggle('open');
});
CSS có thể sử dụng class open để mô tả trạng thái tương ứng. Nhờ đó, cùng một đoạn JavaScript có thể xử lý cả hai chiều mà không cần viết riêng thao tác mở và đóng.
Kiểm tra trạng thái phần tử trước khi xử lý
Trong những trường hợp cần biết một phần tử đang ở trạng thái nào trước khi thực hiện hành động, có thể kiểm tra class bằng contains(). Kết quả trả về giúp JavaScript lựa chọn cách xử lý phù hợp.
const panel = document.querySelector('.panel');
if (panel.classList.contains('open')) {
panel.classList.remove('open');
}
Cách kiểm tra này hữu ích khi trạng thái hiện tại của giao diện ảnh hưởng đến hành động tiếp theo. Nó cũng giúp hạn chế việc thêm hoặc xóa class không cần thiết.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính classList trong JavaScript.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
