Cách Toggle Class Với Thuộc Tính classList Trong JavaScript

Cách toggle class trên element với JavaScript là một trong những kỹ năng thực tế nhất developer có thể học. Toggle dùng cho nhiều việc: ẩn/hiện menu, thêm/xóa filter tìm kiếm, nút social media (like, thumb up...).

Toggle không cần phức tạp hơn vài dòng code, tùy ngữ cảnh. Hôm nay học cách đơn giản bắt đầu không chỉ toggle mà học JavaScript nói chung.

Cấu trúc HTML

Trước khi đến phần functional JS, thiết lập vài element HTML để có thứ tương tác. Tạo wrapper, button, và box.

Đặt sau trong body tags tài liệu HTML:

<div class="wrapper"> <button class="button">Toggle</button> <div class="box"></div> </div>

Parent div (wrapper) chỉ để căn giữa children (box và button) với CSS. Cosmetic, không bắt buộc.

Lưu ý: nếu dùng online editor như CodePen, thêm code vào tab HTML window. Chúng thêm phần HTML còn lại behind the scenes, bao gồm body tags.

CSS Style

Parent div có class .wrapper với Flexbox properties căn giữa children: box và button. Không đi sâu Flexbox, dành cho tutorial khác.

Button và box có basic style classes cho cosmetic.

.wrapper { padding: 2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; } .box { width: 200px; height: 200px; background-color: #eeeeee; } .button { display: block; text-align: center; font-size: 1.5rem; color: white; background-color: #262422; border-radius: 4px; padding: 1rem 2rem; margin-bottom: 1rem; } .bg-red { background-color: #aa2f18; }

Quan trọng tập trung vào class .bg-red chứa CSS background-color giá trị '#AA2F18' (đỏ). Đây là class muốn toggle (thêm/xóa) cho box element khi click button.

Xử Lý Sự Kiện JavaScript

Trước khi thao tác element với JS, phải lưu tham chiếu hai element (box và button). Khai báo hai biến button, box. Gán hai element cho biến tương ứng.

Chọn box và button muốn lưu tham chiếu dùng querySelector lấy class element:

let button = document.querySelector(".button"); let box = document.querySelector(".box");

Giờ có tham chiếu mỗi target element, DOM manipulate chúng, truy cập property và method. Trong trường hợp này, dùng event listener lắng nghe click event trên button. Sau khi click detected thực thi function chạy background color toggling trên box element.

Gắn addEventListener() cho button element (qua biến tham chiếu). Bên trong event listener thêm hai parameter: 'click' (event type), function(). Dùng anonymous function ví dụ này.

Bên trong anonymous function: gắn phương thức toggle() của JavaScript classList property cho box element. toggle() sẽ thêm hoặc xóa class .bg-red:

button.addEventListener("click", function() { box.classList.toggle("bg-red"); });

classList toggle method hoạt động: nếu class chỉ định đã tồn tại trên target element, sẽ bị xóa. Nếu không tồn tại, sẽ được thêm.

Xong! Bạn biết cách toggle class trên element chỉ định với plain JavaScript. Đã đăng toàn bộ code tutorial này lên CodePen.

Code tương thích tất cả trình duyệt hiện đại từ IE10 trở lên.