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

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

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, chi tiết như nào hãy cùng chúng tôi phân tích:

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

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.

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

<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ử

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

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 *

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn