Việc thêm một lớp vào một phần tử HTML rất đơn giản khi sử dụng phương thức thuộc tính classList của JavaScript, add() . Đầu tiên, chúng ta xem nhanh công thức chung - và theo dõi một ví dụ thực tế.
Công thức
var element = document.querySelector("selector")
element.classList.add("class")Trong ví dụ chung ở trên, chúng tôi tìm thấy phần tử HTML đầu tiên trên trang có tên bộ chọn được chỉ định (nó có thể là một bộ chọn phần tử, bộ chọn lớp, v.v.) và lưu trữ một tham chiếu đến nó bằng một biến.
Sau đó, chúng tôi đính kèm thuộc tính classList’s add() phương thức cho phần tử và chỉ định lớp chúng ta muốn thêm.
Ví dụ về danh sách lớp học thực tế
Hãy thử tìm phần tử đoạn đầu tiên trên trang này mà bạn đang đọc ngay bây giờ và đặt cho nó một lớp bg-red .
var firstParagraph = document.querySelector("p")
firstParagraph.classList.add("bg-red")Và kết quả:
Lưu ý:Tôi có bg-red trong biểu định kiểu CSS của trang web của tôi, đó là lý do tại sao nó hoạt động. Lớp trông như thế này:
.bg-red {
background-color: #cf4b32;
}Bạn có thể sử dụng phương thức thêm classList để thêm bất kỳ lớp 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 phông chữ.
Thêm nhiều lớp vào cùng một phần tử
Bạn có thể dễ dàng thêm nhiều lớp vào phần tử mục tiêu của mình cùng một lúc. Hãy thử thêm 3 lớp vào phần tử đoạn đầu tiên của chúng ta:
var firstParagraph = document.querySelector("p")
firstParagraph.classList.add("text-center", "text-xxl", "italic")Thao tác này sẽ làm cho đoạn đầu tiên trên trang này được căn giữa và cung cấp cho nó một kích thước phông chữ lớn và in nghiêng nó. Hãy tự mình thử.
Tài nguyên
- MDN Web Docs element.classList