Phương thức classList toggle() trong JavaScript

• Bùi Tấn Lực
• 975
• 16/09/2025

Chức năng của Phương thức classList toggle() trong JavaScript

Phương thức classList toggle() trong JavaScript 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.

Cú pháp của Phương thức classList toggle() trong JavaScript

tenbien.classList.toggle("giatri");

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

giatri: Giá trị của thuộc tính class.

Code Phương thức classList toggle() trong JavaScript

document.getElementById("pid").classList.toggle("pclass");

<p id="pid">Nội dung cần css</p>
<p>Click vào nút TOGGLE CLASS để thêm, xóa class cho phần tử HTML</p>
<button onclick="themClass()">TOGGLE CLASS</button>
<script>
function themClass() {
  // Lấy danh sách các phương thức của classList dành cho id pid
  const list = document.getElementById("pid").classList;
  // Thêm, Xóa class pclass vào id pid, mỗi lần click thì sẽ kiểm tra, nếu class pclass không tồn tại thì sẽ thêm vào, nếu class pclass tồn tại thì xóa đi.
  list.toggle("pclass");
}
</script>

Chạy Thử

Cách sử dụng classList.toggle() với tham số điều kiện trong JavaScript

Ngoài cách bật hoặc tắt class dựa trên trạng thái hiện tại, classList.toggle() còn nhận thêm một tham số điều kiện để quyết định rõ ràng class có được thêm vào hay không. Cách này phù hợp khi trạng thái giao diện đã được xác định từ một biến hoặc điều kiện cụ thể.

Tham số thứ hai của classList.toggle() hoạt động như thế nào?

Tham số thứ hai có giá trị true hoặc false. Khi điều kiện là true, class sẽ được thêm vào phần tử nếu chưa tồn tại. Khi điều kiện là false, class sẽ bị loại bỏ nếu đang tồn tại.

Điểm đáng chú ý là cách dùng này không phụ thuộc vào trạng thái class trước đó. Vì vậy, nó giúp mã JavaScript thể hiện rõ trạng thái mong muốn thay vì chỉ yêu cầu trình duyệt chuyển đổi trạng thái hiện tại.

const box = document.querySelector('.box');
const isActive = true;

box.classList.toggle('active', isActive);

Trong ví dụ trên, active luôn được đảm bảo xuất hiện khi isActive có giá trị true. Nếu đổi giá trị thành false, class này sẽ được loại bỏ.

Khi nào nên dùng classList.toggle() với điều kiện?

Cách viết này đặc biệt hữu ích khi trạng thái class phụ thuộc vào dữ liệu hoặc một điều kiện trong chương trình. Chẳng hạn, JavaScript có thể dựa vào trạng thái đăng nhập, kết quả kiểm tra dữ liệu hoặc một biến boolean để quyết định giao diện cần hiển thị.

const button = document.querySelector('.button');
const isDisabled = false;

button.classList.toggle('disabled', isDisabled);

So với việc sử dụng if...else để thêm và xóa class riêng biệt, classList.toggle() giúp đoạn mã ngắn gọn hơn khi mục tiêu chỉ là đồng bộ một class với giá trị boolean.

Ví dụ bật tắt class theo trạng thái của phần tử

Một trường hợp thường gặp là thay đổi trạng thái của một nút sau khi người dùng thực hiện thao tác. Biến boolean có thể đóng vai trò nguồn dữ liệu, còn classList.toggle() đảm nhiệm việc cập nhật giao diện.

const button = document.querySelector('.button');
let isSelected = false;

button.addEventListener('click', () => {
    isSelected = !isSelected;
    button.classList.toggle('selected', isSelected);
});

Mỗi lần nhấn nút, giá trị isSelected được đảo ngược. Sau đó, class selected được cập nhật theo đúng trạng thái mới. Cách triển khai này giúp trạng thái dữ liệu và giao diện luôn đồng nhất, đồng thời dễ mở rộng khi xử lý các thành phần tương tác phức tạp hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức classList toggle() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức classList toggle() trong JavaScript
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 *

Bình luận, Hỏi đáp