Thuộc tính classList

Thuộc tính classList chứa pseudomảng các class CSS của phần tử, đồng thời cho phép thêm và xóa class của phần tử, kiểm tra sự tồn tại của một class cụ thể trong số các class của phần tử.

Ở đây nói về thuộc tính class, bên trong có thể viết nhiều class cách nhau bởi dấu cách, ví dụ www ggg zzz. Bằng cách sử dụng classList có thể xóa, ví dụ, class ggg, mà không ảnh hưởng đến các class khác.

Cú pháp

javascriptphần_tử.classList;

Ví dụ . Số lượng class

Tìm hiểu số lượng class của phần tử:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

Kết quả thực thi mã:

javascript3

Ví dụ . Duyệt qua các class

In lần lượt các class của phần tử:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
  console.log(className);
}

Kết quả thực thi mã:

javascript'www'
'ggg'
'zzz'

Xem thêm