StylePropertyMapReadOnly: Methode get()

Syntax

get(property)

Parameter

property

Der Name der Eigenschaft. Bei Namen benutzerdefinierter Eigenschaften (die mit -- beginnen) wird zwischen Groß- und Kleinschreibung unterschieden; bei Namen von Standardeigenschaften nicht.

Rückgabewert

Ein von CSSStyleValue abgeleitetes Objekt oder undefined, wenn property in der Map keinen Wert hat.

Der konkrete Typ des zurückgegebenen Objekts hängt von der Eigenschaft und ihrem Wert ab. Beispielsweise kann eine Eigenschaft, der ein Schlüsselwort zugewiesen wurde, ein CSSKeywordValue zurückgeben, während eine Eigenschaft, der das Ergebnis einer mathematischen Operation zugewiesen wurde, ein CSSMathSum zurückgeben kann.

Ausnahmen

TypeError

Wird ausgelöst, wenn property kein gültiger CSS-Eigenschaftsname ist.

Beispiele

Grundlegende Verwendung

Dieses Beispiel zeigt, wie Sie einige Eigenschaften und ihre Werte abrufen.

HTML

Zunächst erstellen wir einen Link innerhalb eines Absatzes:

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

<pre id="log"></pre>

CSS

Das CSS legt font-weight für den Absatz fest und definiert und verwendet eine benutzerdefinierte Eigenschaft für die Farbe des Links:

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

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

Zunächst rufen wir computedStyleMap() für das Element auf, um dessen Style-Map zu erhalten: ein StylePropertyMapReadOnly-Objekt. Wir erstellen ein Array der Eigenschaften, die uns interessieren, und verwenden die Methode get() von StylePropertyMapReadOnly, um nur deren Werte zu protokollieren.

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

// get the element and its style map
const myElement = document.querySelector("a");
const styleMap = myElement.computedStyleMap();

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

// log the value of each property of interest
for (const property of properties) {
  log(`${property}: ${styleMap.get(property)}`);
}

Ergebnis

Verschiedene Werttypen abrufen

Dieses Beispiel zeigt, dass get() je nach Eigenschaft und ihrem Wert Objekte unterschiedlichen Typs zurückgeben kann.

Zunächst werden mithilfe von CSS mehrere unterschiedliche Eigenschaften auf ein Element angewendet. Anschließend werden sie mit JavaScript ausgelesen und der Name des Konstruktors sowie der Wert jeder Eigenschaft protokolliert. Der Code für die Protokollierung selbst ist nicht Teil der Demonstration und wird daher hier ausgeblendet.

HTML

Zunächst definieren wir ein <div> mit der id demoBox, dem wir Stile hinzufügen.

<div id="demoBox">Text</div>

<pre id="log"></pre>

CSS

#demoBox {
  --my-custom-property: "some text";
  opacity: 0.5;
  width: calc(30% - 20px);
  display: block;
  transform: translate(10px, 10px);
}

#log {
  height: 330px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

Als Nächstes verwenden wir computedStyleMap(), um das StylePropertyMapReadOnly-Objekt für die Demo-Box zu erhalten. Dann durchlaufen wir alle hinzugefügten Eigenschaften und protokollieren jeweils den Namen des Konstruktors und den Wert.

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

const styleMap = document.querySelector("#demoBox").computedStyleMap();
const properties = [
  "opacity",
  "display",
  "width",
  "transform",
  "--my-custom-property",
];

for (const property of properties) {
  const value = styleMap.get(property);
  log(property);
  log(`  type: ${value.constructor.name}`);
  log(`  value: ${value}\n`);
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• getAll()
• has()
• CSS Typed Object Model API
• Houdini kennenlernen: das CSS Typed Object Model