Element: computedStyleMap() Methode

Keine.

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, außer bei einigen layoutbezogenen Eigenschaften, bei denen der aufgelöste Wert der verwendete Wert anstelle des berechneten Wertes ist. Siehe das Beispiel Vergleich mit getComputedStyle() für Details.

Wir beginnen mit einfachem HTML: einem Absatz mit einem Link und einer Definitionsliste, zu der wir alle CSS-Eigenschafts-/Wertepaare 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 zu erfassen und eine Definitionsliste aller CSS-Eigenschaftswerte mit 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? 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.

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 in Pixelwerte aufgelöst, sodass die verwendeten Werte in Pixeln sind, während die berechneten Werte weiterhin in Prozent angegeben werden.

Beachten Sie, dass die Art und Weise, wie wir es präsentieren, 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 dieselben Informationen in einer strukturierteren und verarbeitbaren 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",
)}`;

• Window.getComputedStyle()