Thuộc tính style của phần tử HTML DOM

Định nghĩa và cách sử dụng

style Thuộc tính trả về giá trị của thuộc tính style của phần tử, dưới dạng đối tượng CSSStyleDeclaration.

Đối tượng CSSStyleDeclaration chứa tất cả các thuộc tính樣式 nội bộ của phần tử. Nó không chứa trong <head> Bất kỳ thuộc tính樣式 nào được thiết lập trong phần hoặc bất kỳ bảng樣式 bên ngoài nào.

Điểm 1

Bạn không thể thiết lập樣式 như sau:

element.style = "color:red";

Bạn phải sử dụng các thuộc tính CSS như sau:

element.style.backgroundColor = "red";

Thử trực tiếp

Điểm 2

Cú pháp JavaScript và CSS có sự khác biệt một chút:

backgroundColor / background-color

Xin xem thêm: Hướng dẫn tham khảo Style đối tượng đầy đủ.

Điểm 3

Xin sử dụng thuộc tính style này thay vì Phương thức setAttribute()để tránh việc ghi đè các thuộc tính khác trong thuộc tính style.

Xin xem thêm:

Giáo trình CSS

Tài liệu tham khảo CSS

Đối tượng Style

Thẻ <style> trong HTML

Mô hình

Ví dụ 1

Thay đổi màu của "myH1":

document.getElementById("myH1").style.color = "red";

Thử trực tiếp

Ví dụ 2

Lấy giá trị của đường viền trên của "myP":

let value = document.getElementById("myP").style.borderTop;

Thử trực tiếp

Cú pháp

Trả về thuộc tính style:

Element.style.Thuộc tính

Đặt thuộc tính style:

Element.style.Thuộc tính = Giá trị

Giá trị thuộc tính

Giá trị Mô tả
Giá trị

Đặt giá trị của thuộc tính.

Ví dụ:

element.style.borderBottom = "2px solid red"

Giá trị trả về

Loại Mô tả
Đối tượng Đối tượng CSSStyleDeclaration của phần tử.

Hỗ trợ trình duyệt

element.style Là tính năng DOM Level 2 (2001).

Tất cả các trình duyệt đều hỗ trợ nó hoàn toàn:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ