Thuộc tính classList length trong JavaScript

• Bùi Tấn Lực
• 908
• 16/09/2025

Chức năng của Thuộc tính classList length trong JavaScript

Thuộc tính classList length trong JavaScript dùng để đếm số giá trị có trong thuộc tính class trên một phần tử HTML.

Cú pháp của Thuộc tính classList length trong JavaScript

let ketqua = tenbien.classList.length;

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

ketqua: Kết quả trả về là số lượng giá trị có trong thuộc tính class.

Code Thuộc tính classList length trong JavaScript

<p id="pid" class="pclass pclassbg pclassc" >Nội dung đã css</p>
<p>Số giá trị nằm trong class của id pid: <span id="soid"></span></p>

<script>
// Lấy danh sách các phương thức, thuộc tính của classList dành cho id pid
const list = document.getElementById("pid").classList;
// Đếm số giá trị có trong thuộc tính class
let sogiatri = list.length;
// Gắn số giá trị
document.getElementById("soid").innerHTML = sogiatri;
</script>

Chạy Thử

Ứng dụng classList.length trong JavaScript

classList.length phù hợp khi cần biết một phần tử HTML hiện đang có bao nhiêu class. Giá trị trả về là một số nguyên, từ đó có thể dùng để kiểm tra trạng thái, thực hiện điều kiện hoặc giới hạn việc thêm class.

Kiểm tra phần tử có class hay chưa

Chỉ cần so sánh classList.length với 0 là có thể xác định phần tử đang có class hay không. Cách này hữu ích khi một đoạn JavaScript cần xử lý phần tử dựa trên trạng thái class hiện tại.

const element = document.querySelector('.box');

if (element.classList.length > 0) {
    console.log('Phần tử đang có class');
}

Nếu không có class nào, giá trị sẽ bằng 0. Ngược lại, giá trị lớn hơn 0 cho biết phần tử đang chứa ít nhất một class.

Đếm và kiểm soát số lượng class của phần tử

classList.length có thể dùng để đếm trực tiếp số class mà phần tử đang sở hữu. Điều này đặc biệt hữu ích khi muốn kiểm soát việc gán class động, tránh để một phần tử tích lũy quá nhiều class không cần thiết.

const element = document.querySelector('.box');
const totalClass = element.classList.length;

console.log('Số lượng class:', totalClass);

Cách tiếp cận này chỉ cho biết số lượng class, không xác định class cụ thể nào đang tồn tại. Khi cần kiểm tra một tên class cụ thể, nên kết hợp với phương thức classList.contains().

Kết hợp classList.length với điều kiện if

Giá trị số của classList.length có thể đưa trực tiếp vào điều kiện if. Nhờ đó, JavaScript có thể thực hiện các thao tác khác nhau tùy theo số class hiện có trên phần tử.

const element = document.querySelector('.box');

if (element.classList.length === 1) {
    console.log('Phần tử chỉ có một class');
} else if (element.classList.length > 1) {
    console.log('Phần tử có nhiều class');
}

Cách kiểm tra này phù hợp với những tình huống cần phân biệt trạng thái đơn giản dựa trên số lượng class thay vì phải kiểm tra từng tên class riêng lẻ.

Kiểm tra class trước khi thêm hoặc xóa class

Có thể kiểm tra classList.length trước khi thực hiện thao tác thêm hoặc xóa class. Tuy nhiên, không nên dùng thuộc tính này để xác định một class cụ thể có tồn tại hay không, vì số lượng class không cho biết tên của chúng.

const element = document.querySelector('.box');

if (element.classList.length === 0) {
    element.classList.add('active');
}

Trong ví dụ trên, class active chỉ được thêm khi phần tử chưa có class nào. Nếu mục tiêu là kiểm tra riêng class active, classList.contains() sẽ chính xác và rõ ràng hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính classList length trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thuộc tính classList length trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp