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. Ausgelassen (oder null) bei realen Elementen.

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 betrachtet, selbst 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-Arbeitsgruppe 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. 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 der von einem <style>-Element oder einem externen Stylesheet gesetzten Stile.
• Das element.style-Objekt sollte verwendet werden, um Stile an diesem Element zu setzen oder direkt hinzugefügte Stile zu inspizieren, die durch JavaScript-Manipulation oder das globale style-Attribut hinzugefügt wurden.

Das erste Argument muss ein Element sein. Nicht-Elemente, wie ein Text-Knoten, werfen einen Fehler.

In vielen Code-Beispielen wird getComputedStyle vom document.defaultView-Objekt aus verwendet. In fast allen Fällen ist dies unnötig, da getComputedStyle auch im window-Objekt existiert. Wahrscheinlich war das defaultView-Muster eine Mischung aus dem Wunsch, keine Testspezifikation für window zu schreiben, und der Erstellung einer API, die 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-Eigenschaften mit Langschreibweise sowie Kurzschreibweisen. Beispielsweise enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu den border-width und border Kurzschreibweise-Eigenschaftsnamen. Sie können Werte mit Langnamen wie font-size sowie Kurzschreibweisen wie font abfragen.
• CSS-Eigenschaftswerte können mit der Methode getPropertyValue(propName) oder durch direkte Indizierung im Objekt über Array- oder Punktschreibweise wie obj['z-index'] oder obj.zIndex abgerufen werden.
• Die von getComputedStyle zurückgegebenen Werte sind aufgelöste Werte. Diese sind normalerweise dieselben wie CSS 2.1s berechnete Werte, 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 "einsatzbereiten" Endwerte von Eigenschaften nach 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 den alten Bedeutungsgehalt der berechneten Werte zurück, jetzt als verwendete Werte bezeichnet. Ein Unterschied zwischen Vor- und Nach-Layout-Werten besteht beispielsweise in der Auflösung von Prozentsätzen für width oder height, da diese nur für verwendete Werte durch ihre Pixeläquivalente ersetzt werden.
• Zur Vermeidung des "CSS-Verlauf-Lecks" Sicherheitsproblems geben Browser vorsätzlich ungenaue Werte für die berechneten Stile eines besuchten Links zurück, als ob der Benutzer die verlinkte URL nie besucht hätte. Siehe Schließen des CSS-Verlauf-Lecks und Datenschutzbezogene Änderungen für CSS :visited für Beispiele, wie dies implementiert wird.
• Während CSS-Übergängen gibt getComputedStyle in Firefox den ursprünglichen Eigenschaftswert, in WebKit jedoch den Endwert der Eigenschaft zurück.
• 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 enthaltenen Block von height:100px anwenden, gibt der berechnete Stil von Firefox für top 70px zurück, da 100 − 30 = 70.
• Aus Kompatibilitätsgründen werden serialisierte Farbwerte als rgb()-Farben ausgedrückt, wenn der Alpha-Kanal-Wert genau 1 ist, und rgba()-Farben andernfalls. In beiden Fällen wird die veraltete Syntax mit Kommata als Trennzeichen verwendet, z. B. rgb(255, 0, 0).

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