Phương thức classList add() trong JavaScript

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

Chức năng của Phương thức classList add() trong JavaScript

Phương thức classList add() trong JavaScript dùng để thêm class với một hoặc nhiều giá trị vào một phần tử HTML, nếu phần tử HTML đó đã có class rồi thì vẫn thêm bình thường mà không xóa giá trị của class cũ, phương thức add() nằm trong thuộc tính classList.

Cú pháp của Phương thức classList add() trong JavaScript

Thêm 1 giá trị

tenbien.classList.add("giatri");

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

giatri: Giá trị của thuộc tính class.

Thêm nhiều giá trị

tenbien.classList.add("giatri1", "giatri2",.....);

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

giatri1, giatri2,....: Nhiều giá trị của thuộc tính class.

Code Phương thức classList add() trong JavaScript

Phương thức classList add() một giá trị trong JavaScript

document.getElementById("pid").classList.add("pclass");

<p id="pid">Nội dung cần css</p>
<p>Click vào nút THÊM CLASS để thêm class cho phần tử HTML</p>
<button onclick="themClass()">THÊM CLASS</button>
<script>
function themClass() {
  // Lấy danh sách các phương thức của classList dành cho id pid
  const list = document.getElementById("pid").classList;
  // Thêm class pclass vào id pid
  list.add("pclass");
}
</script>

Chạy Thử

Phương thức classList add() nhiều giá trị trong JavaScript

document.getElementById("pid").classList.add("pclass","pclassbg","pclassc");

<p id="pid">Nội dung cần css</p>
<p>Click vào nút THÊM CLASS để thêm class với nhiều giá trị vào id pid</p>
<button onclick="themClass()">THÊM CLASS</button>
<script>
function themClass() {
  // Lấy danh sách các phương thức của classList dành cho id pid
  const list = document.getElementById("pid").classList;
  // Thêm class với nhiều giá trị vào id pid
  list.add("pclass","pclassbg","pclassc");
}
</script>

Chạy Thử

Cách sử dụng classList.add() trong các tình huống thực tế

Phương thức classList.add() không chỉ dùng để bổ sung một lớp CSS cố định. Khi kết hợp với sự kiện và điều kiện trong JavaScript, phương thức này có thể tạo ra nhiều tương tác trực quan cho trang web mà không cần thay đổi trực tiếp thuộc tính className.

Thêm class khi người dùng click vào nút

Một trường hợp phổ biến là thêm class cho một phần tử sau khi người dùng nhấn nút. Cách này phù hợp để mở menu, hiển thị nội dung ẩn hoặc thay đổi trạng thái của một thành phần trên trang.

<button id="btn">Hiển thị</button>
<p id="content">Nội dung cần hiển thị</p>

<script>
const btn = document.getElementById("btn");
const content = document.getElementById("content");

btn.addEventListener("click", function() {
    content.classList.add("show");
});
</script>

Trong ví dụ trên, khi nút được nhấn, class show sẽ được thêm vào phần tử content. CSS có thể sử dụng class này để quyết định cách phần tử xuất hiện trên giao diện.

Thêm class để thay đổi giao diện phần tử HTML

classList.add() cũng hữu ích khi cần thay đổi trạng thái hiển thị của một phần tử. Thay vì chỉnh từng thuộc tính CSS bằng JavaScript, bạn chỉ cần thêm một class đã được định nghĩa sẵn trong CSS.

const box = document.querySelector(".box");

box.classList.add("active");

Khi class active được thêm vào, các quy tắc CSS tương ứng sẽ được áp dụng. Phương pháp này giúp phần xử lý JavaScript tập trung vào hành vi, còn phần định dạng giao diện được quản lý riêng bằng CSS.

Thêm nhiều class dựa trên điều kiện JavaScript

Trong những tình huống cần xác định trạng thái trước khi thay đổi giao diện, classList.add() có thể được sử dụng bên trong câu lệnh điều kiện. Đây là cách phù hợp để phản ánh kết quả kiểm tra dữ liệu hoặc trạng thái của một thành phần.

const form = document.querySelector(".form");
const isValid = true;

if (isValid) {
    form.classList.add("valid", "checked");
}

Phương thức có thể nhận nhiều tên class trong cùng một lần gọi. Vì vậy, khi điều kiện thỏa mãn, các class valid và checked sẽ được thêm đồng thời, giúp mã ngắn gọn và dễ quản lý hơn.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Phương thức classList add() trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Phương thức classList add() 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