StylePropertyMapReadOnly

Eingeschränkt verfügbar

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

Das StylePropertyMapReadOnly Interface der CSS Typed Object Model API bietet eine schreibgeschützte Darstellung eines CSS-Deklarationsblocks, der eine Alternative zu CSSStyleDeclaration darstellt. Eine Instanz dieses Interfaces kann über Element.computedStyleMap() abgerufen werden.

In diesem Artikel

Instanzen-Eigenschaften

StylePropertyMapReadOnly.size

Gibt eine nicht-signierte lange Zahl zurück, die die Größe des StylePropertyMapReadOnly Objekts enthält.

Instanzen-Methoden

StylePropertyMapReadOnly.entries()

Gibt ein Array von [key, value] Paaren der eigenen aufzählbaren Eigenschaften eines gegebenen Objekts in der gleichen Reihenfolge zurück, wie es von einer for...in Schleife bereitgestellt wird (der Unterschied ist, dass eine for-in Schleife auch Eigenschaften in der Prototyp-Kette aufzählt).

StylePropertyMapReadOnly.forEach()

Führt eine bereitgestellte Funktion einmal für jedes Element von StylePropertyMapReadOnly aus.

StylePropertyMapReadOnly.get()

Gibt den Wert der angegebenen Eigenschaft zurück.

StylePropertyMapReadOnly.getAll()

Gibt ein Array von CSSStyleValue Objekten zurück, die die Werte für die angegebene Eigenschaft enthalten.

StylePropertyMapReadOnly.has()

Gibt an, ob die angegebene Eigenschaft im StylePropertyMapReadOnly Objekt enthalten ist.

StylePropertyMapReadOnly.keys()

Gibt einen neuen Array-Iterator zurück, der die Schlüssel für jedes Element im StylePropertyMapReadOnly enthält.

StylePropertyMapReadOnly.values()

Gibt einen neuen Array-Iterator zurück, der die Werte für jeden Index im StylePropertyMapReadOnly Objekt enthält.

Beispiele

Wir brauchen ein Element zur Beobachtung:

html
<p>
  This is a paragraph with some text. We can add some CSS, or not. The style map
  will include all the default and inherited CSS property values.
</p>
<dl id="output"></dl>

Wir fügen etwas CSS mit einer benutzerdefinierten Eigenschaft hinzu, um die Ausgabe besser zu veranschaulichen:

css
p {
  --some-variable: 1.6em;
  --some-other-variable: translateX(33vw);
  --another-variable: 42;
  line-height: var(--some-variable);
}

Wir fügen JavaScript hinzu, um unseren Absatz zu greifen und eine Definitionsliste aller Standard-CSS-Eigenschaftenwerte mit Element.computedStyleMap() zurückzugeben.

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

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

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

// iterate through the map of all the properties and values, adding a <dt> and <dd> for each
for (const [prop, val] of stylePropertyMap) {
  // properties
  const cssProperty = document.createElement("dt");
  cssProperty.innerText = prop;
  stylesList.appendChild(cssProperty);

  // values
  const cssValue = document.createElement("dd");
  cssValue.innerText = val;
  stylesList.appendChild(cssValue);
}

Spezifikationen

Spezifikation

CSS Typed OM Level 1
# stylepropertymapreadonly

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS Typed Object Model API
StylePropertyMapReadOnly
Instanzeigenschaften
1. size
Instanzmethoden
Verwandte Seiten für CSS Typed Object Model API
Anleitungen
1. Verwenden des CSS Typed Object Model