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 abgeglichen werden soll. Kann weggelassen (oder null) werden, wenn reale Elemente verwendet werden.

Ein live CSSStyleDeclaration-Objekt, das sich automatisch aktualisiert, 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 ::part() oder ::slotted() ist.

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. Zusätzlich unterstützt der neueste W3-Standard ausschließlich ::before und ::after, während der CSS-WG-Entwurf diese Werte nicht einschränkt. Die Browser-Kompatibilität kann variieren.

In diesem Beispiel wird ein <p>-Element gestylt. Anschließend werden diese Stile mittels getComputedStyle() abgerufen und als Textinhalt des <p> ausgegeben.

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

• Das von getComputedStyle zurückgegebene Objekt ist schreibgeschützt und sollte genutzt werden, um den Stil des Elements zu inspizieren — einschließlich der Stile, die durch ein <style>-Element oder ein externes Stylesheet gesetzt wurden.
• Das element.style-Objekt sollte genutzt werden, um Stile auf dieses Element zu setzen oder Stile zu inspizieren, die direkt durch JavaScript-Manipulationen oder das globale 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 Code-Beispielen wird getComputedStyle aus dem document.defaultView-Objekt aufgerufen. In fast allen Fällen ist dies unnötig, da getComputedStyle auch im window-Objekt existiert. Wahrscheinlich stammt das defaultView-Muster aus einer Kombination von Bestrebungen, keine Testspezifikationen für window zu schreiben und eine API zu schaffen, die auch in Java nutzbar ist.

getComputedStyle kann Stilinformationen von Pseudo-Elementen abrufen (z. B. ::after, ::before, ::marker, ::line-marker — siehe den Pseudo-Element-Standard).

<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 langnamen-CSS-Eigenschaften sowie Kurznamen. Zum Beispiel enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu border-width und border Shorthandeigenschaften. Sie können Werte sowohl mit Langnamen wie font-size als auch mit Kurznamen wie font abfragen.
• CSS-Eigenschaftswerte können mit der Methode getPropertyValue(propName) oder durch direkte Indizierung des Objekts mit Array- oder Punktnotation wie obj['z-index'] oder obj.zIndex abgerufen werden.
• Die von getComputedStyle zurückgegebenen Werte sind aufgelöste Werte. Diese entsprechen normalerweise den in CSS 2.1 definierten berechneten Werten, aber für einige ältere Eigenschaften wie width, height oder padding sind sie identisch mit den verwendeten Werten. Ursprünglich definierte CSS 2.0 die berechneten Werte als die finalen Werte, die nach der Kaskadierung und Vererbung verwendet werden sollen. CSS 2.1 hat sie jedoch als Werte vor dem Layout redefiniert, während verwendete Werte danach bestimmt werden. Bei CSS-2.0-Eigenschaften gibt getComputedStyle die alte Bedeutung der berechneten Werte zurück, die jetzt verwendete Werte genannt werden. Ein Unterschied zwischen Vorab- und Nach-Layout-Werten betrifft beispielsweise die Auflösung von Prozentangaben für width oder height, da diese nur für verwendete Werte durch ihre Pixeläquivalente ersetzt werden.
• Zur Vermeidung des "CSS-Historienlecks"-Sicherheitsproblems können Browser manchmal absichtlich ungenaue Werte für getComputedStyle zurückgeben, z. B. für besuchte Links. Sie geben dabei Werte zurück, als hätte der Nutzer die verlinkte URL nie besucht. Siehe Das Schließen des CSS-Historienlecks und Datenschutzbezogene Änderungen für CSS :visited für Beispiele, wie dies umgesetzt wird.
• Während CSS-Übergängen gibt getComputedStyle in Firefox den ursprünglichen Eigenschaftswert und in WebKit den Schlusswert zurück.
• In Firefox geben Eigenschaften mit dem Wert auto den verwendeten Wert zurück, nicht auto. Wenn Sie beispielsweise top:auto und bottom:0 auf ein Element mit height:30px und einem umgebenden Block mit height:100px anwenden, gibt der berechnete Stil für top in Firefox 70px zurück, da 100 − 30 = 70.
• Aus Kompatibilitätsgründen werden serielle Farbwerte als rgb()-Farben ausgedrückt, wenn der Alpha-Kanalwert genau 1 ist, und als rgba()-Farben in anderen Fällen. In beiden Fällen wird die ältere Syntax mit Kommas als Trennzeichen verwendet (z. B. rgb(255, 0, 0)).

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