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
Hello
there!
How
are
you?Hello
there!
How
are
you?Hello
there!
How
are
you?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
Hello
there!
How
are
you?// 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?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
Hello
there!
How
are
you?Hello
there!
How
are
you?Hello
there!
How
are
you?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
Hello
there!
How
are
you?Đâ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
Hello
there!
How
are
you?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?Hello
there!
How
are
you?Hello
there!
How
are
you?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'];
// 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 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'];
Hello
there!
How
are
you?Đâ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'];
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'];
Hello
there!
How
are
you?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'];
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'];
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'];
Hello
there!
How
are
you?Hello
there!
How
are
you?