Cách tạo kiểu các phần tử DOM bằng JavaScript

Các cách bạn có thể áp dụng kiểu cho các phần tử trên trang, theo cách động, sử dụng JavaScript thuần túy

Bạn có thể có nhu cầu áp dụng động các thuộc tính CSS cho các phần tử DOM.

Trình duyệt API có gì để làm điều đó?

Đầu tiên, một trong những cách rõ ràng nhất là thêm hoặc xóa các lớp khỏi một phần tử và sử dụng kiểu lớp trong CSS của bạn.

const element = document.querySelector('#my-element')

Bạn có thể dùngclassListthuộc tính của một phần tử vàadd()remove()phương pháp:

element.classList.add('myclass')
element.classList.remove('myclass')

Bạn cũng có thể thay đổi trực tiếp từng thuộc tính CSS của một phần tử bằng cách sử dụngstylethuộc tính, tham chiếu đến phần tửkiểu nội tuyến.

Ví dụ: bạn có thể thay đổi màu phần tử bằng cách sử dụng

element.style.color = '#fff'

Bạn có thể thay đổi đường viền:

element.style.border = '1px solid black'

Bạn đã thấycolorborder. Bạn có thể thay đổi tất cả các thuộc tính CSS bằng cách sử dụng camelCase thay vì dấu gạch ngang khi tên thuộc tính CSS chứa chúng.

Một bảng dịch được liệt kê thuận tiện trongtrang MDN này.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: