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 sie gleich, außer bei einigen layoutbezogenen Eigenschaften, bei denen der aufgelöste Wert der verwendete Wert anstelle des berechneten Wertes ist. Sehen Sie sich das Vergleichsbeispiel mit getComputedStyle() an, um Details zu erfahren.

Beispiele

Standard-Stile erhalten

Wir beginnen mit einfachem HTML: einem Absatz mit einem Link und einer Definitionsliste, zu der wir alle CSS-Eigenschafts-/Wert-Paare hinzufü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 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.

Vergleich mit getComputedStyle()

Window.getComputedStyle() gibt aufgelöste Werte zurück, während computedStyleMap() berechnete Werte zurückgibt. Diese sind normalerweise gleich, aber für einige Eigenschaften ist der aufgelöste Wert der verwendete Wert anstelle des berechneten Wertes. Zum Beispiel werden Prozentwerte für Breiten nach dem Layout zu Pixelwerten aufgelöst, sodass die verwendeten Werte in Pixeln sind, während die berechneten Werte weiterhin in Prozent sind.

Beachten Sie, dass wir die beiden APIs so präsentieren, dass sie ähnlicher erscheinen 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 besser verarbeitbare Weise.

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