HTMLElement: thuộc tính attributeStyleMap

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Thuộc tính chỉ đọc attributeStyleMap của giao diện HTMLElement trả về một đối tượng StylePropertyMap trực tiếp chứa danh sách các thuộc tính kiểu của phần tử được định nghĩa trong thuộc tính style nội tuyến của phần tử, hoặc được gán bằng thuộc tính style của giao diện HTMLElement thông qua script.

Các thuộc tính shorthand được mở rộng. Nếu bạn đặt border-top: 1px solid black, các thuộc tính dài (border-top-color, border-top-style, và border-top-width) sẽ được đặt thay thế.

Sự khác biệt chính giữa thuộc tính style và thuộc tính attributeStyleMap là thuộc tính style sẽ trả về một đối tượng CSSStyleDeclaration, trong khi thuộc tính attributeStyleMap sẽ trả về một đối tượng StylePropertyMap.

Mặc dù bản thân thuộc tính này không thể ghi được, bạn có thể đọc và ghi các kiểu nội tuyến thông qua đối tượng StylePropertyMap mà nó trả về, giống như thông qua đối tượng CSSStyleDeclaration được trả về qua thuộc tính style.

Giá trị

Một đối tượng StylePropertyMap trực tiếp.

Ví dụ

Đoạn mã sau đây thể hiện mối quan hệ giữa thuộc tính style và thuộc tính attributeStyleMap:

html
<div id="el" style="border-top: 1px solid blue; color: red;">
  Một phần tử ví dụ
</div>
<div id="output"></div>
css
#el {
  font-size: 16px;
}

#output {
  white-space: pre-line;
}
js
const element = document.getElementById("el");
const output = document.getElementById("output");

for (const property of element.attributeStyleMap) {
  output.textContent += `${property[0]} = ${property[1][0].toString()}\n`;
}

Đặc tả kỹ thuật

Specification
CSS Typed OM Level 1
# dom-elementcssinlinestyle-attributestylemap

Tương thích trình duyệt

Xem thêm