Window: getComputedStyle() Methode

element

Das Element, für das der berechnete Stil abgerufen werden soll.

pseudoElt Optional

Ein String, der das Pseudo-Element angibt, das übereinstimmen soll. Wird es weggelassen (oder auf null gesetzt), wird es für reale Elemente verwendet.

Ein lebendiges CSSStyleDeclaration Objekt, das automatisch aktualisiert wird, wenn sich die Stile des Elements ändern.

TypeError

Wenn das übergebene Objekt kein Element ist oder pseudoElt kein gültiger Pseudo-Element-Selektor ist oder es sich um ::part() oder ::slotted() handelt.

Hinweis: Ein gültiger Pseudo-Element-Selektor bezieht sich auf die syntaktische Gültigkeit, z. B. wird ::unsupported als gültig angesehen, auch wenn das Pseudo-Element selbst nicht unterstützt wird. Darüber hinaus unterstützt der neueste W3-Standard explizit nur ::before und ::after, während der Entwurf der CSS WG diesen Wert nicht einschränkt. Die Browser-Kompatibilität kann variieren.

In diesem Beispiel stylen wir ein <p>-Element, rufen diese Stile mit getComputedStyle() ab und geben sie in den Textinhalt des <p> aus.

Das zurückgegebene Objekt ist vom gleichen Typ CSSStyleDeclaration wie das Objekt, das von der style-Eigenschaft des Elements zurückgegeben wird. Die beiden Objekte haben jedoch unterschiedliche Zwecke:

• Das Objekt von getComputedStyle ist schreibgeschützt und sollte verwendet werden, um den Stil des Elements zu überprüfen — einschließlich der Stile, die durch ein <style>-Element oder ein externes Stylesheet gesetzt wurden.
• Das element.style-Objekt sollte verwendet werden, um Stile auf diesem Element festzulegen oder Stile zu überprüfen, die direkt von JavaScript-Manipulationen oder dem globalen style-Attribut hinzugefügt wurden.

Das erste Argument muss ein Element sein. Nicht-Elemente, wie ein Text-Knoten, führen zu einem Fehler.

In vielen Codebeispielen wird getComputedStyle von dem document.defaultView-Objekt verwendet. In fast allen Fällen ist dies unnötig, da getComputedStyle auch im window-Objekt existiert. Es ist wahrscheinlich, dass das defaultView-Muster eine Kombination aus dem Wunsch war, keine Test-Spezifikation für window zu schreiben, und einem API, das auch in Java verwendet werden konnte.

getComputedStyle kann Stilinformationen von Pseudo-Elementen abrufen (wie ::after, ::before, ::marker, ::line-marker — siehe die Pseudo-Element-Spezifikation).

<style>
  h3::after {
    content: " rocks!";
  }
</style>

<h3>Generated content</h3>

<script>
  const h3 = document.querySelector("h3");
  const result = getComputedStyle(h3, ":after").content;

  console.log("the generated content is: ", result); // returns ' rocks!'
</script>

• Das zurückgegebene CSSStyleDeclaration Objekt enthält aktive Werte für CSS-Property-Namen in Langform als auch Kurzform-Namen. Zum Beispiel enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu den border-width und border Kurzform-Eigenschaftsnamen. Sie können Werte mit Langform-Namen wie font-size sowie Kurzform-Namen wie font abfragen.
• CSS-Eigenschaftswerte können entweder mit der Methode getPropertyValue(propName) abgerufen werden oder indem direkt mittels Array- oder Punktnotation in das Objekt zugegriffen wird, wie obj['z-index'] oder obj.zIndex.
• Die von getComputedStyle zurückgegebenen Werte sind aufgelöste Werte. Diese sind in der Regel identisch mit den berechneten Werten von CSS 2.1, aber für einige ältere Eigenschaften wie width, height oder padding, sind sie stattdessen die gleichen wie genutzte Werte. Ursprünglich definierte CSS 2.0 die berechneten Werte als die "gebrauchsfertigen" Endwerte der Eigenschaften nach Kaskadierung und Vererbung, aber CSS 2.1 definierte sie als pre-Layout, und genutzte Werte als post-Layout. Für CSS 2.0-Eigenschaften gibt getComputedStyle die alte Bedeutung von berechneten Werten zurück, jetzt gebrauchte Werte genannt. Ein Unterschied zwischen pre- und post-Layoutwerten umfasst die Auflösung von Prozentwerten für width oder height, da diese nur für gebrauchte Werte durch ihren Pixeläquivalent ersetzt werden.
• Zur Vermeidung des "CSS History Leak" Sicherheitsproblems geben Browser für einen besuchten Link manchmal absichtlich ungenaue Werte zurück, indem sie Werte zurückgeben, als ob der Benutzer die verlinkte URL nie besucht hätte. Siehe Plugging the CSS history leak und Privacy-related changes coming to CSS :visited für Beispiele, wie dies umgesetzt wird.
• Während CSS-Übergängen gibt getComputedStyle in Firefox den ursprünglichen Eigenschaftswert zurück, in WebKit jedoch den finalen Eigenschaftswert.
• In Firefox geben Eigenschaften mit dem Wert auto den genutzten Wert zurück, nicht den Wert auto. Wenn Sie also top:auto und bottom:0 auf ein Element mit height:30px und einen enthaltenden Block von height:100px anwenden, gibt der berechnete Stil für top in Firefox 70px zurück, da 100 − 30 = 70.
• Aus Kompatibilitätsgründen werden serialisierte Farbwerte als rgb()-Farben ausgedrückt, wenn der Alphakanalwert genau 1 ist, und als rgba()-Farben andernfalls. In beiden Fällen wird die veraltete Syntax mit Kommas als Trennzeichen verwendet (beispielsweise rgb(255, 0, 0)).

• window.getDefaultComputedStyle()
• getPropertyValue()
• Aufgelöster Wert