Window: getComputedStyle() Methode

element

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

pseudoElt Optional

Ein String, der das zu matchende Pseudoelement angibt. Weggelassen (oder null) für reale Elemente.

Ein live CSSStyleDeclaration-Objekt, das sich automatisch aktualisiert, wenn die Stile des Elements geändert werden.

TypeError

Wenn das übergebene Objekt kein Element ist oder pseudoElt kein gültiger Pseudoelement-Selektor oder ::part() oder ::slotted() ist.

Hinweis: Ein gültiger Pseudoelement-Selektor bezieht sich auf die syntaktische Gültigkeit, z.B. wird ::unsupported als gültig betrachtet, obwohl das Pseudoelement selbst nicht unterstützt wird. Zusätzlich 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 im Textinhalt des <p> aus.

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

• Das Objekt von getComputedStyle ist schreibgeschützt und sollte verwendet werden, um den Stil des Elements zu inspizieren — einschließlich derjenigen, die durch ein <style>-Element oder ein externes Stylesheet gesetzt wurden.
• Das element.style-Objekt sollte verwendet werden, um Stile auf diesem Element zu setzen oder Stile zu inspizieren, die direkt durch JavaScript-Manipulation 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 vom document.defaultView-Objekt verwendet. In fast allen Fällen ist dies unnötig, da getComputedStyle auch auf dem window-Objekt existiert. Es ist wahrscheinlich, dass das defaultView-Muster eine Kombination aus Leuten war, die keinen Testspezifikationscode für window schreiben wollten und eine API erstellen wollten, die auch in Java verwendet werden konnte.

getComputedStyle kann Stilinformationen von Pseudoelementen abrufen (wie ::after, ::before, ::marker, ::line-marker — siehe die Pseudoelement-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-Eigenschaftsnamen in Langform sowie in Kurzform. Zum Beispiel enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu border-width und border Kurzform-Eigenschaftsnamen. Sie können Werte mit Langformnamen wie font-size sowie Kurzformnamen 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 sind normalerweise dieselben wie die berechneten Werte von CSS 2.1, aber für einige ältere Eigenschaften wie width, height oder padding, sind sie stattdessen dieselben wie verwendete Werte. Ursprünglich definierte CSS 2.0 die berechneten Werte als die "bereit zur Verwendung" finalen Werte von Eigenschaften nach der Kaskadierung und Vererbung, aber CSS 2.1 definierte sie als vor dem Layout und verwendete Werte als nach dem Layout. Für CSS 2.0-Eigenschaften gibt getComputedStyle die alte Bedeutung der berechneten Werte zurück, jetzt genannt verwendete Werte. Ein Beispielunterschied zwischen Vor- und Nach-Layout-Werten umfasst die Auflösung von Prozentsätzen für width oder height, da diese nur bei verwendeten Werten durch ihre Pixeläquivalente ersetzt werden.
• Zurückgegebene Werte sind manchmal absichtlich ungenau. Um das Sicherheitsproblem "CSS History Leak" zu vermeiden, können Browser bei den berechneten Stilen für einen besuchten Link lügen und 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 implementiert wird.
• Während CSS-Übergängen, gibt getComputedStyle den ursprünglichen Eigenschaftswert in Firefox zurück, aber den finalen Eigenschaftswert in WebKit.
• In Firefox geben Eigenschaften mit dem Wert auto den verwendeten Wert zurück, nicht den Wert auto. Wenn Sie also top:auto und bottom:0 auf ein Element mit height:30px und einem umgebenden Block von height:100px anwenden, gibt der berechnete Stil für top in Firefox 70px zurück, da 100 − 30 = 70 ist.
• Aus Kompatibilitätsgründen werden serialisierte Farbwerte als rgb() ausgedrückt, wenn der Alpha-Kanal-Wert genau 1 ist, und als rgba() für andere Fälle. In beiden Fällen wird die ältere Syntax verwendet, mit Kommas als Trennzeichen (zum Beispiel rgb(255, 0, 0)).

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