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

• Bùi Tấn Lực
• 963
• 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ử

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

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 *

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn