Thêm lớp chỉ với css

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 .color-blue vào từng thành phần đoạn văn (p) 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 phần tử

Để lấy tất cả các phần tử 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ề một

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

2 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 điề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

let elem = document.querySelector('p.color-purple');

// Add the .color-blue class
elem.classList.add('color-blue');

// Remove the color-purple class
elem.classList.remove('color-purple');

Đâ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

// Add the .color-blue and .text-large classes
elem.classList.add('color-blue', 'text-large');

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, chúng tôi 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à sử dụng 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 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

// Add the .color-blue class
for (let elem of p) {
	elem.classList.add('color-blue');
}

// Remove the .color-purple class
for (let elem of purple) {
	elem.classList.remove('color-purple');
}

Đâ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

// Add the .color-blue class
p.forEach(function (elem) {
	elem.classList.add('color-blue');
});

// Remove the .color-purple class
purple.forEach(function (elem) {
	elem.classList.remove('color-purple');
});

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

Tôi có thể thêm lớp thông qua CSS không?

Làm cách nào để thêm một lớp CSS bằng CSS?

Làm cách nào để thêm CSS vào lớp trong JavaScript?

Làm cách nào để sử dụng lớp div trong CSS?