Thêm, loại bỏ & chuyển đổi lớp với classList trong JavaScript

---

Việc sửa đổi các lớp trên một phần tử dễ dàng hơn nhiều so với trước đây, phần lớn là nhờ vào đối tượng classList .

Giả sử ta có một phần tử như sau:

<div class="cool new shades">
  🕶️
</div>

Hãy chơi xung quanh các lớp trên phần tử đó. Đầu tiên, hãy lấy một tham chiếu đến phần tử trong biến shadesEl :

let shadesEl = document.querySelector('.cool');

console.log(shadesEl.classList);
// ["cool", "new", "shades", value: "cool new shades"]

console.log(shadesEl.classList[1]); // new

Điều này hoạt động, nhưng thay vào đó ta nên gọi một trong các phương thức sau trên đối tượng classList :

thêm vào

Thêm một hoặc nhiều lớp vào phần tử:

shadesEl.classList.add('make', 'me', 'look', 'rad');

Yếu tố của ta bây giờ:

<div class="cool new shades make me look rad">
  🕶️
</div>

chứa đựng

Chứa trả về một boolean cho biết nếu lớp đó có mặt:

console.log(shadesEl.classList.contains('look')); // true

mục

Nhận lớp ở index được cung cấp:

console.log(shadesEl.classList.item(3));  // make

tẩy

Xóa một trong các lớp khác:

shadesEl.classList.remove('cool', 'make', 'me');

<div class="new shades look rad">
  🕶️
</div>

JavaScript sẽ không phàn nàn nếu bạn cố gắng xóa một lớp không tồn tại.

chuyển đổi

Thay vì thực hiện toàn bộ một điệu nhảy như thế này nếu bạn muốn bật hoặc tắt một lớp học:

// Tedious toggle
if (shadesEl.classList.contains('rad')) {
  shadesEl.classList.remove('rad');
} else {
  shadesEl.classList.add('rad');
}

… Bạn chỉ cần sử dụng classList.toggle để thay thế. Nói điều gì đó như thế này khi nhấp vào nút:

coolButton.addEventListener('click', () => {
  shadesEl.classList.toggle('cool');
});

classList.toggle sẽ trả về true nếu lớp được thêm vào và false nếu đã bị xóa:

let a = shadesEl.classList.toggle('cool');

console.log(a); // true --> class was added

classList.toggle tùy ý nhận đối số thứ hai sẽ đánh giá thành boolean. Điều này sẽ buộc chuyển đổi để thêm hoặc xóa lớp đó tùy thuộc vào cách đối số thứ hai đánh giá:

let someCondition;

let b = shadesEl.classList.toggle('cool', !!someCondition);
console.log(b);
// false, `someCondition` is undefined and evaluates to false, class is removed

someCondition = 'I wear my sunglasses at night';

let c = shadesEl.classList.toggle('cool', !!someCondition);
console.log(c);
// true, `someCondition` evaluates to true, class is added.

Sử dụng !! phía trước một biểu thức buộc giá trị thành một boolean.

🤠 Và đó là nó! Nó không dễ dàng hơn thế này.

---

---

Các tin liên quan

Cách Chèn Javascript vào HTML bằng Thẻ script
2020-09-23
Mẫu thiết kế module trong JavaScript
2020-09-21
Mẫu thiết kế trình quan sát trong JavaScript
2020-09-21
Mẫu thiết kế Singleton trong JavaScript
2020-09-21
Mẫu thiết kế nguyên mẫu trong JavaScript
2020-09-21
Lời hứa của JavaScript dành cho người giả
2020-09-15
Sao chép các đối tượng trong JavaScript
2020-09-15
Cách sử dụng API tìm nạp JavaScript để lấy dữ liệu
2020-09-15
Cách mã hóa và giải mã chuỗi với Base64 trong JavaScript
2020-09-15
Toán tử đơn nguyên JavaScript: Đơn giản và hữu ích
2020-09-15