StylePropertyMapReadOnly

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 对象中每个索引的值。

示例

我们必须有一个要观察的元素

html

<p>
  This is a paragraph with some text. We can add some CSS, or not. The style map
  will include all the default and inherited CSS property values.
</p>
<dl id="output"></dl>

我们使用自定义属性添加一些 CSS，以便更好地演示输出

css

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

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

// get the element
const myElement = document.querySelector("p");

// get the <dl> we'll be populating
const stylesList = document.querySelector("#output");

// Retrieve all computed styles with computedStyleMap()
const stylePropertyMap = myElement.computedStyleMap();

// iterate through the map of all the properties and values, adding a <dt> and <dd> for each
for (const [prop, val] of stylePropertyMap) {
  // properties
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = prop;
  stylesList.appendChild(cssProperty);

  // values
  const cssValue = document.createElement("dd");
  cssValue.innerText = val;
  stylesList.appendChild(cssValue);
}

规范

规范
CSS 类型化对象模型级别 1 # the-stylepropertymap

浏览器兼容性

BCD 表格仅在浏览器中加载