Làm cách nào để xóa nhiều lớp trong JavaScript?

Trong vài tuần tới, tôi muốn quay lại vấn đề cơ bản và xem xét các nguyên tắc cơ bản của JavaScript. Hôm nay, chúng ta sẽ xem cách thêm và xóa các lớp khỏi nhiều phần tử

Nào cùng đào vào bên trong

Một ví dụ

Hãy tưởng tượng bạn có một số CSS ảnh hưởng đến màu sắc của một số văn bản, như thế này

.color-blue {
	color: blue;
}

.color-purple {
	color: rebeccapurple;
}

Và bạn đã có một số HTML như thế này

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

Bạn muốn thêm lớp

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

7 vào mỗi thành phần đoạn văn (

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

8) và loại bỏ lớp

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

0 khỏi thành phần có nó

Hãy xem xét một vài kỹ thuật mà chúng ta có thể kết hợp để làm điều đó

Lấy tất cả các yếu tố

Để lấy tất cả các phần tử mà chúng ta muốn sửa đổi, chúng ta có thể sử dụng phương thức

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

1. Bạn chuyển vào một chuỗi bộ chọn CSS (bất kỳ bộ chọn CSS hợp lệ nào, bao gồm cả những chuỗi phức tạp, sẽ hoạt động) và nó trả về 12 phần tử phù hợp

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

Đây là một bản demo

Thêm và xóa các lớp

Bạn có thể thêm và xóa các lớp khỏi một phần tử bằng cách sử dụng API

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

3

Nó cung cấp một số phương thức mà bạn có thể sử dụng để thêm, xóa, chuyển đổi và kiểm tra các lớp trên một phần tử. Chúng ta có thể sử dụng phương thức

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

4 để thêm một lớp và phương thức

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

5 để xóa một lớp. Không bao gồm dấu chấm ở đầu (

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

6) khi chuyển vào tên lớp

Phương pháp này chỉ hoạt động trên một phần tử duy nhất, không phải là một tập hợp của chúng

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

0

Đây là một bản demo khác

Bạn cũng có thể thêm hoặc xóa nhiều lớp bằng cách chuyển chúng vào dưới dạng danh sách được phân tách bằng dấu phẩy

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

1

Vòng qua từng phần tử

Để thêm và xóa các lớp khỏi nhiều phần tử, chúng ta cần lặp qua từng phần tử trong

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

2 mà chúng ta lấy lại từ phương thức

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

1 và sử dụng API

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

3 với nó

Có nhiều cách để làm điều đó, nhưng hai cách dễ nhất là với phương pháp

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

0 và vòng lặp

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

1

Đây là một vòng lặp

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

1

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

8

Đây là bản demo của vòng lặp

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

1

Và đây là cách bạn làm điều đó với phương pháp

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

0

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

1

Và đây là bản demo của phương pháp

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

0

Tôi thường thích vòng lặp

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

1 hơn vì tôi nghĩ nó đơn giản hơn để viết

Tuy nhiên, phương thức

// Get all paragraph elements
let p = document.querySelectorAll('p');

// Get all paragraph elements with the .color-purple class
let purple = document.querySelectorAll('p.color-purple');

0 cũng có thể được gọi trực tiếp trên phương thức

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

2 được trả về từ phương thức

<p class="color-purple">Hellop>
<p>there!p>
<p class="color-purple">Howp>
<p>arep>
<p class="color-purple">you?p>

1 mà không cần lưu nó vào một biến. Điều đó có thể hữu ích vào dịp

Làm cách nào để xóa phần tử lớp trong JavaScript?

Làm cách nào để loại bỏ nhiều lớp js?

Tôi có thể chuyển đổi nhiều lớp JavaScript không?

Làm cách nào để xóa tất cả lớp trong JavaScript?