StylePropertyMapReadOnly - 提供了 CSS 声明块的只读表示形式

StylePropertyMapReadOnly 是 CSS 类型对象模型 API 的接口，提供了 CSS 声明块的只读表示形式，它是 CSSStyleDeclaration 的替代接口。使用 Element.computedStyleMap() 可以获取此接口的实例。

属性

StylePropertyMapReadOnly.size

返回一个无符号的长整数，其中包含 StylePropertyMapReadOnly 对象的大小。

方法

StylePropertyMapReadOnly.entries()

返回给定对象自己的可枚举属性 [key, value] 对的数组，其顺序与 for ... in 循环所提供的顺序相同（区别在于 for-in 循环也枚举原型链中的属性）。

StylePropertyMapReadOnly.forEach()

为 StylePropertyMapReadOnly 的每个元素执行一次提供的函数。

StylePropertyMapReadOnly.get()

返回指定属性的值。

StylePropertyMapReadOnly.getAll()

返回一个 CSSStyleValue 对象的数组，其中包含提供的属性的值。

StylePropertyMapReadOnly.has()

指示指定的属性是否在 StylePropertyMapReadOnly 对象中。

StylePropertyMapReadOnly.keys()

返回一个新的数组迭代器，该数组迭代器包含 StylePropertyMapReadOnly 中每个项目的键。

StylePropertyMapReadOnly.values()

返回一个新的数组迭代器，其中包含 StylePropertyMapReadOnly 对象中每个索引的值。

实例

首先有一个要观察的元素：

<p>
   这是一段文字。我们可以添加一些 CSS，也可以不添加。样式表将包含所有默认和继承的 CSS 属性值。
</p>
<dl id="output"></dl>

接着添加了带有自定义属性的 CSS，以更好地演示输出：

p { 
   --someVariable: 1.6em;
   --someOtherVariable: translateX(33vw);
   --anotherVariable: 42;
   line-height: var(--someVariable);
}

然后添加 JavaScript 来获取我们的段落，并使用 computedStyleMap(). 返回所有默认 CSS 属性值的定义列表。

// 获取元素
const myElement = document.querySelector('p');

// 获取我们用来填充的 <dl>
const stylesList = document.querySelector('#output');

// 使用 computedStyleMap() 检索所有计算出的样式
const stylePropertyMap = myElement.computedStyleMap();

// 遍历所有属性和值的映射，逐个添加到 <dt> 和 <dd>
for (const [prop, val] of stylePropertyMap) {
	// 属性
	const cssProperty = document.createElement('dt');
	cssProperty.appendChild(document.createTextNode(prop));
	stylesList.appendChild(cssProperty);

	// 值
	const cssValue = document.createElement('dd');
	cssValue.appendChild(document.createTextNode(val));
	stylesList.appendChild(cssValue);
}

规范

规范	状态	备注
CSS Typed OM Level 1 StylePropertyMapReadOnly 的定义	工作草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性