Cách thêm class cho phần tử với Vanilla JavaScript

Thêm class cho phần tử HTML rất đơn giản khi dùng phương thức add() của thuộc tính classList trong JavaScript. Trước, chúng ta xem nhanh công thức chung — sau đó làm ví dụ thực tế.

Công thức chung

var element = document.querySelector("selector") element.classList.add("class")

Trong ví dụ chung trên, chúng ta tìm phần tử HTML đầu tiên trên trang có tên selector chỉ định (có thể là selector phần tử, selector class, v.v.) và lưu tham chiếu đến nó bằng một biến.

Sau đó, chúng ta gắn phương thức add() của thuộc tính classList vào phần tử và chỉ định class muốn thêm.

Ví dụ thực tế classList

Hãy thử tìm phần tử đoạn văn đầu tiên trên trang này và gán cho nó class bg-red.

var firstParagraph = document.querySelector("p") firstParagraph.classList.add("bg-red")

Kết quả:

Lưu ý: Tôi có class bg-red trong file CSS của trang web, nên nó mới hoạt động. Class trông như sau:

.bg-red { background-color: #cf4b32; }

Bạn có thể dùng phương thức classList.add để thêm bất kỳ class tùy chỉnh nào, sử dụng bất kỳ thuộc tính CSS nào, từ màu sắc đến kích thước font.

Thêm nhiều class cùng lúc cho một phần tử

Bạn có thể dễ dàng thêm nhiều class cho phần tử mục tiêu cùng một lúc. Hãy thử thêm 3 class cho đoạn văn đầu tiên:

var firstParagraph = document.querySelector("p") firstParagraph.classList.add("text-center", "text-xxl", "italic")

Điều này sẽ căn giữa đoạn văn đầu tiên, cho nó font to và in nghiêng. Hãy tự thử nghiệm.

Tài nguyên

• MDN Web Docs element.classList