Thuộc tính kiểu DOM HTML
Thí dụ
Thêm màu đỏ vào phần tử <h1>:
document.getElementById("myH1").style.color = "red";
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc tính style trả về đối tượng CSSStyleDec Tuyên bố, đối tượng này đại diện cho thuộc tính style của một phần tử.
Thuộc tính style được sử dụng để lấy hoặc đặt một kiểu cụ thể của một phần tử bằng cách sử dụng các thuộc tính CSS khác nhau.
Lưu ý: Không thể đặt kiểu bằng cách gán một chuỗi cho thuộc tính kiểu, ví dụ: phần tử .style = "color: red;". Để đặt kiểu của một phần tử, hãy nối thuộc tính "CSS" vào kiểu và chỉ định một giá trị, như sau:
element.style.backgroundColor = "red"; // set the background color of an element to red
Như bạn có thể thấy, cú pháp JavaScript để đặt thuộc tính CSS hơi khác so với CSS (backgroundColor thay vì background-color).
Để biết danh sách tất cả các thuộc tính có sẵn, hãy xem Tham chiếu Đối tượng Kiểu của chúng tôi .
Lưu ý: Thuộc tính style chỉ trả về các khai báo CSS được đặt trong thuộc tính kiểu nội tuyến của phần tử, ví dụ:
<p style = "color: red;">. Không thể sử dụng thuộc tính này để lấy thông tin về quy tắc kiểu từ phần <head> trong tài liệu hoặc các trang định kiểu bên ngoài.
Tuy nhiên, bạn có thể truy cập phần tử <style> từ <head> bằng cách sử dụng document.getElementsByTagName ():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Lưu ý: Bạn nên sử dụng thuộc tính style thay vì phương thức phần tử .setAttribute ("style", "...") , vì thuộc tính style sẽ không ghi đè các thuộc tính CSS khác có thể được chỉ định trong thuộc tính style.
Hỗ trợ trình duyệt
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trả về các thuộc tính kiểu:
element.style.property
Đặt thuộc tính kiểu:
element.style.property = value
Giá trị tài sản
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Chi tiết kỹ thuật
| Giá trị trả lại: | Đối tượng CSSStyleDec Tuyên bố, đại diện cho thuộc tính kiểu của một phần tử |
|---|---|
| Phiên bản DOM | Dom cấp độ 2 CSS |
Các ví dụ khác
Thí dụ
Nhận giá trị của đường viền trên cùng của phần tử <p>:
var x = document.getElementById("myP").style.borderTop;
Các trang liên quan
Hướng dẫn CSS : Hướng dẫn CSS
Tham khảo CSS: Thuộc tính CSS
Tham chiếu DOM HTML: Tham chiếu đối tượng kiểu
Tham chiếu HTML: Thẻ HTML <style>
❮ Đối tượng phần tử