StylePropertyMapReadOnly: get() 方法

get() 方法是 StylePropertyMapReadOnly 接口的方法，它返回指定属性的第一个值的 CSSStyleValue 对象。

语法

js
get(property)

参数

property

要检索其值的属性的名称。

返回值

一个 CSSStyleValue 对象。

示例

让我们获取一些属性和值。我们首先在 HTML 中的段落内创建一个链接，并添加一个定义列表，我们将在 JavaScript 中填充它。

html
<p>
  <a href="https://example.com">Link</a>
</p>
<dl id="results"></dl>

我们添加了一些 CSS，包括自定义属性和可继承属性。

css
p {
  font-weight: bold;
}
a {
  --color: red;
  color: var(--color);
}

我们使用元素的 computedStyleMap() 返回一个 StylePropertyMapReadOnly 对象。我们创建了一个感兴趣属性的数组，并使用 StylePropertyMapReadOnly 的 get() 方法仅获取这些值。

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

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

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

// array of properties we're interested in
const ofInterest = ["font-weight", "border-left-color", "color", "--color"];

// iterate over our properties of interest
for (const property of ofInterest) {
  // properties
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = property;
  stylesList.appendChild(cssProperty);

  // values
  const cssValue = document.createElement("dd");
  // use get() to find the value
  cssValue.innerText = styleMap.get(property);
  stylesList.appendChild(cssValue);
}

规范

规范
CSS Typed OM 级别 1
# dom-stylepropertymapreadonly-get

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅