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

phần_tử.classList;

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

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

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

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

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

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

3

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

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

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

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

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

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

'www'
'ggg'
'zzz'

Xem thêm

phương thức classList.add,
thêm class được chỉ định
phương thức classList.remove,
xóa class được chỉ định
phương thức classList.contains,
kiểm tra class được chỉ định
phương thức classList.toggle,
luân phiên class được chỉ định