Thuộc tính className trong JavaScript

• Bùi Tấn Lực
• 929
• 11/09/2025

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

Thuộc tính className trong JavaScript dùng để lấy tên class và thiết lập tên class thông qua cách lấy id của phần tử HTML.

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

Thiết lập className:

tenbien.className  = "giatri1 giatri2,....";

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

giatri1 giatri2,...: là các giá trị của class.

Lấy className:

let ketqua = tenbien.className;

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

ketqua: Kết quả trả về.

Code Thuộc tính className trong JavaScript

Thuộc tính className lấy tên lớp trong JavaScript

let classvalue = document.getElementById("divid").className;

<div id="divid" class="divmot divhai">Phần tử cần lấy className</div>
<p>Kết quả: <span id="ketqua"></span> </p>
<script>
let classvalue = document.getElementById("divid").className;
document.getElementById("ketqua").innerHTML = classvalue;
</script>

Kết quả sau khi lấy các tên class:

divmot divhai

Chạy Thử

Thuộc tính className thiết lập tên lớp trong JavaScript

document.getElementById("divid").className  = "divba divbon";

<div id="divid" class="divmot divhai">Phần tử cần thiết lập className</div>
<p>Kết quả sau khi thiết lập className: <span id="ketqua"></span></p>
<script>
// Thiết lập tên lớp
let divid = document.getElementById("divid");
divid.className  = "divba divbon";
// lấy tên class sau khi thiết lập
let classvalue = document.getElementById("divid").className;
document.getElementById("ketqua").innerHTML = classvalue;
</script>

Kết quả sau khi thiết lập tên class:

divba divbon

Chạy Thử

So sánh className và classList trong JavaScript

Khi thao tác với class của phần tử HTML bằng JavaScript, className và classList đều có thể được sử dụng nhưng cách hoạt động khác nhau. className phù hợp khi cần đọc hoặc thay thế toàn bộ chuỗi class, trong khi classList thuận tiện hơn khi muốn thêm, xóa, kiểm tra hoặc chuyển đổi từng class riêng lẻ.

className hoạt động như thế nào?

Thuộc tính className trả về tên class của phần tử dưới dạng một chuỗi. Khi gán giá trị mới, toàn bộ chuỗi class hiện tại sẽ được thay thế bằng giá trị được chỉ định.

Ví dụ, phần tử đang có hai class là box và active:

<div class="box active">Nội dung</div>

Có thể thay đổi toàn bộ class bằng JavaScript:

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

Cách này đơn giản khi cần thiết lập lại toàn bộ class, nhưng cần cẩn thận vì các class cũ không được giữ lại nếu chúng không xuất hiện trong chuỗi mới.

classList là gì và khi nào nên sử dụng?

classList cung cấp một tập hợp các phương thức giúp thao tác trực tiếp với từng class của phần tử. Một số phương thức thường dùng gồm add() để thêm class, remove() để xóa, toggle() để bật hoặc tắt và contains() để kiểm tra class có tồn tại hay không.

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

element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('selected');

Trong các tình huống chỉ cần thay đổi một hoặc vài class mà không muốn ảnh hưởng đến những class khác, classList thường là lựa chọn rõ ràng và an toàn hơn.

So sánh ưu điểm và nhược điểm giữa className và classList

Tiêu chí	className	classList
Cách làm việc	Thao tác với toàn bộ chuỗi class	Thao tác với từng class
Thêm class	Phải tạo lại chuỗi class	Dùng add()
Xóa class	Phải xử lý chuỗi	Dùng remove()
Kiểm tra class	Thường cần xử lý chuỗi	Dùng contains()
Chuyển đổi class	Không có phương thức chuyên dụng	Dùng toggle()

Điểm khác biệt quan trọng nhất nằm ở phạm vi tác động. Với className, việc gán giá trị mới có thể làm mất các class đang tồn tại. Với classList, từng class được xử lý độc lập nên phù hợp hơn với các thao tác thay đổi giao diện theo sự kiện.

Ví dụ thay thế className bằng classList

Giả sử một nút có class button và cần thêm class active khi người dùng tương tác. Nếu sử dụng className, việc gán trực tiếp có thể vô tình ghi đè những class khác:

const button = document.querySelector('.button');
button.className = 'active';

Sau thao tác này, class button ban đầu không còn. Với classList, chỉ class cần thay đổi được xử lý:

const button = document.querySelector('.button');
button.classList.add('active');

Cách tiếp cận này giúp giữ nguyên các class khác của phần tử và làm cho mục đích của đoạn mã dễ hiểu hơn.

Nên dùng className hay classList trong dự án hiện đại?

Nếu cần thay thế toàn bộ danh sách class bằng một giá trị mới, className vẫn là lựa chọn phù hợp. Ngược lại, khi giao diện cần thêm, xóa hoặc chuyển đổi class trong quá trình tương tác, nên ưu tiên classList.

Đặc biệt với các chức năng như mở menu, đóng hộp thoại, đổi trạng thái nút hoặc hiển thị nội dung động, classList giúp mã JavaScript ngắn gọn và hạn chế việc vô tình ghi đè class không liên quan.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính className 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 className 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