StylePropertyMapReadOnly: get()-Methode

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die get()-Methode des StylePropertyMapReadOnly-Interfaces gibt ein CSSStyleValue-Objekt für den ersten Wert der angegebenen Eigenschaft zurück.

Syntax

get(property)

Parameter

property: Der Name der Eigenschaft, deren Wert abgerufen werden soll.

Lassen Sie uns ein paar Eigenschaften und Werte abrufen. Beginnen wir damit, einen Link innerhalb eines Absatzes in unserem HTML zu erstellen, und fügen eine Definitionsliste hinzu, die wir mit JavaScript füllen werden:

html

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

Wir fügen ein bisschen CSS hinzu, einschließlich einer benutzerdefinierten Eigenschaft und einer vererbbaren Eigenschaft:

css

p {
  font-weight: bold;
}
a {
  --color: red;
  color: var(--color);
}

Wir verwenden die computedStyleMap()-Methode des Elements, um ein StylePropertyMapReadOnly-Objekt zurückzugeben. Wir erstellen ein Array von interessanten Eigenschaften und verwenden die get()-Methode von StylePropertyMapReadOnly, um nur diese Werte abzurufen.

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

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

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

// array of properties we're interested in
const ofInterest = ["font-weight", "border-left-color", "color", "--color"];

// iterate over our properties of interest
for (const property of ofInterest) {
  // properties
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = property;
  stylesList.appendChild(cssProperty);

  // values
  const cssValue = document.createElement("dd");
  // use get() to find the value
  cssValue.innerText = styleMap.get(property);
  stylesList.appendChild(cssValue);
}