Element: computedStyleMap()-Methode

Syntax

computedStyleMap()

Parameter

Keine.

Rückgabewert

Ein StylePropertyMapReadOnly-Objekt.

Im Gegensatz zu Window.getComputedStyle enthält der Rückgabewert berechnete Werte, nicht aufgelöste Werte. Für die meisten Eigenschaften sind diese identisch, mit Ausnahme einiger layoutbezogener Eigenschaften, bei denen der aufgelöste Wert der verwendete Wert und nicht der berechnete Wert ist. Siehe das Vergleichsbeispiel mit getComputedStyle() für Details.

Beispiele

Abrufen der Standardstile

Wir beginnen mit einfachem HTML: einem Absatz mit einem Link und einer Definitionsliste, in die wir alle CSS-Eigenschafts-/Wertepaare einfügen.

<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 zu erfassen und eine Definitionsliste aller CSS-Eigenschaftswerte mithilfe von computedStyleMap() 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.

Haben Sie bemerkt, wie viele Standard-CSS-Eigenschaften ein Link hatte? Ändern Sie document.querySelector("a") in document.querySelector("p"), und Sie werden einen Unterschied in den Standard-berechneten Werten von 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 in der Regel gleich, aber für einige Eigenschaften ist der aufgelöste Wert der verwendete Wert anstelle des berechneten Wertes. Beispielsweise werden Prozentwerte für Breiten nach dem Layout in Pixelwerte aufgelöst, sodass die verwendeten Werte in Pixeln, während die berechneten Werte noch in Prozent sind.

Beachten Sie, dass die Art und Weise, wie wir es darstellen, die beiden APIs ähnlicher erscheinen lässt, als sie sind. computedStyleMap() enthält CSS Typed OM-Objekte, während getComputedStyle() Zeichenfolgen enthält. Ersteres präsentiert die gleichen Informationen auf eine strukturiertere und leichter verarbeitbare Weise.

In diesem Beispiel ist die width-Eigenschaft als Prozentsatz angegeben, sodass der berechnete Wert als Prozentsatz angegeben wird, aber der aufgelöste Wert in Pixeln. Die height ist immer in Pixeln. Die background-color ist eine benannte Farbe, wird aber in einen 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()