SVGElement: 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 SVGElement trả về một đối tượng StylePropertyMap trực tiếp chứa danh sách các thuộc tính style 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 SVGElement qua script.
Các thuộc tính viết tắt đượ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 trả về đối tượng CSSStyleDeclaration, trong khi thuộc tính attributeStyleMap trả về đối tượng StylePropertyMap.
Mặc dù bản thân thuộc tính này không thể ghi, bạn vẫn có thể đọc và ghi style 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 trả về qua thuộc tính style.
Giá trị
Một đối tượng StylePropertyMap trực tiếp.
Ví dụ
Đoạn code sau minh họa mối quan hệ giữa thuộc tính style và thuộc tính attributeStyleMap:
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 250 250"
width="250"
height="250">
<circle
cx="100"
cy="100"
r="50"
id="el"
style="border-top: 1px solid blue; color: red;" />
</svg>
<div id="output"></div>
#el {
font-size: 16px;
}
#output {
white-space: pre-line;
}
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`;
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Typed OM Level 1 # dom-elementcssinlinestyle-attributestylemap |