Element: Methode computedStyleMap()

Syntax

computedStyleMap()

Parameter

Keine.

Rückgabewert

Ein StylePropertyMapReadOnly-Objekt.

Anders als Window.getComputedStyle enthält der Rückgabewert berechnete Werte, nicht aufgelöste Werte. Für die meisten Eigenschaften sind diese gleich, mit Ausnahme einiger layoutbezogener Eigenschaften, bei denen der aufgelöste Wert statt des berechneten Werts der verwendete Wert ist. Weitere Details finden Sie im Beispiel Vergleich mit getComputedStyle().

Beispiele

Standardstile abrufen

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

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

Wir fügen ein wenig CSS hinzu.

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

Wir fügen JavaScript hinzu, um unseren Link abzurufen und mithilfe von computedStyleMap() eine Definitionsliste aller CSS-Eigenschaftswerte zurückzugeben.

// 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.

Ist Ihnen aufgefallen, wie viele Standard-CSS-Eigenschaften ein Link hat? Ändern Sie document.querySelector("a") zu document.querySelector("p"), und Sie werden einen Unterschied bei den standardmäßigen berechneten Werten für margin-top und margin-bottom feststellen.

Vergleich mit getComputedStyle()

Window.getComputedStyle() gibt aufgelöste Werte zurück, während computedStyleMap() berechnete Werte zurückgibt. Diese sind normalerweise gleich, aber bei einigen Eigenschaften ist der aufgelöste Wert statt des berechneten Werts der verwendete Wert. Beispielsweise werden Prozentwerte für Breiten nach dem Layout in Pixelwerte aufgelöst; daher werden die verwendeten Werte in Pixeln angegeben, während die berechneten Werte weiterhin in Prozent angegeben werden.

Beachten Sie, dass die Art, wie wir dies darstellen, die beiden APIs ähnlicher erscheinen lässt, als sie tatsächlich sind. computedStyleMap() enthält Objekte von CSS Typed OM, während getComputedStyle() Zeichenketten enthält. Ersteres stellt dieselben Informationen strukturierter und besser verarbeitbar dar.

In diesem Beispiel wird die Eigenschaft width als Prozentwert angegeben, daher wird der berechnete Wert als Prozentwert angegeben, der aufgelöste Wert jedoch in Pixeln. Die height wird immer in Pixeln angegeben. background-color ist eine benannte Farbe, wird aber zu einem RGB-Wert berechnet.

<div class="container">
  <div class="item"></div>
</div>
<pre id="result"></pre>

.container {
  width: 200px;
  height: 200px;
}

.item {
  width: 50%;
  height: 100px;
  background-color: tomato;
}

const item = document.querySelector(".item");
const result = document.querySelector("#result");
const resolvedValues = getComputedStyle(item);
const computedValues = item.computedStyleMap();

result.textContent = `resolvedValues.width = ${resolvedValues.width}
computedValues.get("width") = ${computedValues.get("width")}

resolvedValues.height = ${resolvedValues.height}
computedValues.get("height") = ${computedValues.get("height")}

resolvedValues.backgroundColor = ${resolvedValues.backgroundColor}
computedValues.get("background-color") = ${computedValues.get(
  "background-color",
)}`;

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Window.getComputedStyle()