HTMLElement: attributeStyleMap 属性
HTMLElement 接口的只读属性 attributeStyleMap 返回一个实时的 StylePropertyMap 对象,该对象包含元素内联 style 属性中定义的样式属性列表,或通过脚本通过 属性分配给 styleHTMLElement 接口的样式属性列表。
简写属性会被展开。如果你设置 border-top: 1px solid black,则会设置长写属性(border-top-color、border-top-style 和 border-top-width)。
属性和 styleattributeStyleMap 属性的主要区别在于,style 属性返回一个 CSSStyleDeclaration 对象,而 attributeStyleMap 属性返回一个 StylePropertyMap 对象。
尽管属性本身是不可写的,但你可以通过它返回的 StylePropertyMap 对象来读写内联样式,就像通过 style 属性返回的 CSSStyleDeclaration 对象一样。
值
一个实时的 StylePropertyMap 对象。
示例
以下代码片段展示了 style 属性和 attributeStyleMap 属性之间的关系
html
<div id="el" style="border-top: 1px solid blue; color: red;">
An example element
</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`;
}
规范
| 规范 |
|---|
| CSS 类型化 OM Level 1 # dom-elementcssinlinestyle-attributestylemap |
浏览器兼容性
加载中…