JavaScript đặt tên lớp

Thuộc tính lớp HTML được sử dụng để đánh dấu các phần tử riêng lẻ bằng một lớp, phân biệt nó với các phần tử khác trong tài liệu

Điều này cho phép các nhà phát triển web mặt trước dễ dàng áp dụng các kiểu CSS cho một phần tử hoặc để dễ dàng xác định và truy xuất một phần tử từ DOM. Một phần tử HTML có thể có nhiều lớp. Tương tự, nhiều phần tử HTML có thể chia sẻ cùng một lớp – không có hạn chế dựa trên loại phần tử và các lớp không cần phải là duy nhất

Có hai cách đơn giản để đặt lớp của phần tử

1. Sửa đổi thuộc tính className (đóng vai trò là một getter và setter)
2. Sửa đổi thuộc tính classList bằng các phương thức tích hợp sẵn của nó

Chúng tôi thường khuyến nghị cách tiếp cận thứ hai, sử dụng thuộc tính classList, vì mã kết quả thường dễ đọc hơn, chính xác hơn và nhiều chức năng hơn so với khi sửa đổi trực tiếp thuộc tính className

Thuộc tính tên lớp

Bạn có thể truy cập className của một phần tử bằng cách gọi nó trực tiếp trên phần tử được trả về bởi một querySelector đã cho. Lấy ví dụ mã HTML mẫu sau

HTML

  Make me classy

Mã này tạo ra một

phần tử, nhưng không bao gồm lớp. Bây giờ, hãy xem một số mã JavaScript mẫu cố gắng thao tác phần tử này

JavaScript

console.log(document.querySelector('h1').className);
// The expected output is an empty string

document.querySelector('h1').className = 'classy';
console.log(document.querySelector('h1').className);
//Expected output: classy

Trong đoạn mã trên, bản in đầu tiên tới bàn điều khiển trả về một chuỗi trống vì

phần tử không có thuộc tính lớp khi mã chạy. Do đó, thuộc tính className trả về một chuỗi rỗng

Dòng mã thứ hai (dòng 4) kéo theo dòng đầu tiên

phần tử được tìm thấy bằng cách sử dụng tài liệu. phương thức querySelector(). Trước khi thuộc tính className lấy tên lớp cho phần tử, chúng ta có thể sử dụng lại nó ở đây để gán một lớp cho phần tử. Áp dụng toán tử gán biến thuộc tính className từ getter thành setter. Ví dụ trên gán lớp “classy” cho phần tử thu được từ tài liệu

Bây giờ chúng ta đã đặt giá trị lớp của

phần tử, câu lệnh in thứ hai sẽ lấy giá trị của lớp và in nó ra bàn điều khiển. Đầu ra của bản in này sẽ là “classy” – loại mà chúng tôi đã chỉ định ở dòng thứ năm của tập lệnh

Ghi chú. Thuộc tính className có tính hủy diệt – nếu trước đây phần tử có một lớp thì bây giờ nó đã biến mất. Thông tin lớp trước đó đã được thay thế bằng giá trị “classy” mới và đây sẽ là lớp duy nhất trên phần tử

cú pháp

người bắt. Yếu tố. tên lớp

người định cư. Yếu tố. className = lớp (Chuỗi)

Thuộc tính classList

Thuộc tính classList mặc định là chỉ đọc, nhưng nó đi kèm với các phương thức và thuộc tính hỗ trợ có thể được sử dụng để thao tác danh sách các lớp được gán cho một phần tử HTML. Lấy tài liệu mẫu sau đây bên dưới

HTML

  I am super classy!

Điều này tạo ra một

phần tử có nhiều lớp. Chúng ta có thể sử dụng thuộc tính classList trong JavaScript để xem xét các nhiệm vụ lớp này, như trong đoạn mã sau

JavaScript

console.log(document.querySelector('h1').classList.length);
// Expected output: 4

console.log(document.querySelector('h1').classList.value);
// Expected output: multi-class header first title

Gọi thuộc tính độ dài của classList cho phần tử trả về số lớp mà phần tử có

Gọi thuộc tính giá trị của classList cho phần tử trả về danh sách tên dưới dạng chuỗi

phương pháp danh sách lớp

Mặc dù chức năng chỉ đọc rất hữu ích nhưng nó vẫn chưa mang lại cho chúng ta tính linh hoạt của thuộc tính className. Để làm việc với classList chúng ta cần sử dụng các phương thức hỗ trợ trên đối tượng classList

Chúng tôi sẽ xem xét từng chức năng bằng cách sử dụng

phần tử mẫu từ ví dụ trước. Phần tử này có bốn lớp trong danh sách lớp của nó – “multi-class”, “header”, “first” và “title”. Các phương thức bên dưới thao tác với danh sách lớp này

thêm vào()

Phương thức add() thêm một lớp khác vào danh sách

JavaScript

document.querySelector('h1').classList.add('bulky');

console.log(document.querySelector('h1').classList.value);
// Expected output: multi-class header first title bulky

Trong đoạn mã trên, chúng tôi đã thêm lớp “bulky” vào danh sách. Thao tác này sẽ thêm tên lớp mà chúng tôi đã cung cấp vào cuối định nghĩa lớp, dẫn đến việc thêm tên lớp “bulky” vào đầu ra được in

di dời()

Hàm remove() xóa một lớp khỏi danh sách lớp

JavaScript

document.querySelector('h1').classList.remove('bulky')

console.log(document.querySelector('h1').classList.value);
// Expected output: multi-class header first title

Trong ví dụ này, "bulky" đã bị xóa khỏi danh sách lớp của phần tử, để lại nó với bốn lớp ban đầu của chúng tôi

Ghi chú. Bạn có thể thêm hoặc xóa nhiều lớp cùng một lúc – chỉ cần chuyển chúng vào dưới dạng một chuỗi được phân cách bằng dấu phẩy (i. e. “extra,bulky,classes” – điều này thêm hoặc xóa ba lớp khỏi danh sách lớp)

chuyển đổi ()

Phương thức toggle() chuyển đổi một lớp nhất định trên một đối tượng. Điều này có nghĩa là lớp được yêu cầu sẽ được thêm nếu thiếu hoặc bị xóa nếu có

JavaScript

document.querySelector('h1').classList.toggle('toggles');

console.log(document.querySelector('h1').classList.value);
// Expected output: multi-class header first title toggle

document.querySelector('h1').classList.toggle('toggles')

console.log(document.querySelector('h1').classList.value);
// Expected output: multi-class header first title

Đoạn mã này thêm, sau đó loại bỏ lớp “toggles” bằng cách sử dụng phương thức toggle(). Bàn điều khiển đầu tiên. log() sẽ bao gồm “toggles” trong danh sách lớp, trong khi bảng điều khiển thứ hai. log() sẽ không

thay thế()

Phương thức replace() thay thế một tên lớp bằng một tên khác. Phải mất hai tham số - tên lớp để thay thế và giá trị mới để thay thế nó bằng