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
Hello
there!
How
are
you?
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
Hello
there!
How
are
you?
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
Hello
there!
How
are
you?
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 Hello
there!
How
are
you?
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
Hello
there!
How
are
you?
3Nó 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
Hello
there!
How
are
you?
4 để thêm một lớp và phương thức Hello
there!
How
are
you?
5 để xóa một lớp. Không bao gồm dấu chấm ở đầu [Hello
there!
How
are
you?
6] khi điền vào tên lớpPhươ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
Hello
there!
How
are
you?
2, chúng tôi lấy lại từ phương thức Hello
there!
How
are
you?
1 và sử dụng API Hello
there!
How
are
you?
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'];
1Và đâ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'];
0Tô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ếtTuy 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 Hello
there!
How
are
you?
2 được trả về từ phương thức Hello
there!
How
are
you?
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