Element: computedStyleMap() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die computedStyleMap()-Methode der Element Schnittstelle gibt eine StylePropertyMapReadOnly-Schnittstelle zurück, die eine schreibgeschützte Darstellung eines CSS-Deklarationsblocks bietet und eine Alternative zu CSSStyleDeclaration darstellt.

Syntax

js
computedStyleMap()

Parameter

Keine.

Rückgabewert

Eine StylePropertyMapReadOnly-Schnittstelle.

Beispiele

Wir beginnen mit einem einfachen HTML: einem Absatz mit einem Link und einer Definitionsliste, zu der wir alle CSS-Eigenschafts-/Wertepaare hinzufügen.

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

Wir fügen ein wenig CSS hinzu

css
a {
  --color: red;
  color: var(--color);
}

Wir fügen JavaScript hinzu, um unseren Link zu erfassen und eine Definitionsliste aller CSS-Eigenschaftswerte mit computedStyleMap() zurückzugeben.

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

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

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

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

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

In Browsern, die computedStyleMap() unterstützen, sehen Sie eine Liste aller CSS-Eigenschaften und -Werte. In anderen Browsern sehen Sie nur einen Link.

Haben Sie bemerkt, wie viele Standard-CSS-Eigenschaften ein Link hat? Aktualisieren Sie document.querySelector("a") zu document.querySelector("p"), und Sie werden einen Unterschied in den standardmäßig berechneten Werten für margin-top und margin-bottom bemerken.

Spezifikationen

Specification
CSS Typed OM Level 1
# dom-element-computedstylemap

Browser-Kompatibilität

BCD tables only load in the browser