Window: getComputedStyle() Methode

element

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

pseudoElt Optional

Ein String, der das Pseudoelement angibt, das abgeglichen werden soll. 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 ist 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 angesehen, obwohl das Pseudoelement selbst nicht unterstützt wird. Zusätzlich unterstützt der neueste W3-Standard explizit nur ::before und ::after, während der CSS WG-Entwurf diesen Wert nicht beschränkt. Die Browser-Kompatibilität kann variieren.

In diesem Beispiel stylen wir ein <p> Element, rufen dann 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 derjenigen, die durch ein <style> Element oder ein externes Stylesheet festgelegt wurden.
• Das element.style Objekt sollte verwendet werden, um Stile für dieses Element zu setzen oder um Stile zu überprüfen, 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 Codebeispielen wird getComputedStyle vom document.defaultView Objekt verwendet. In fast allen Fällen ist dies unnötig, da getComputedStyle auch im window Objekt vorhanden ist. Wahrscheinlich war das defaultView Muster eine Kombination von Leuten, die das Schreiben einer Testspezifikation für window vermeiden wollten und einer API, die auch in Java nutzbar war.

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 im Langformat sowie Kurzformen. Zum Beispiel enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu den Kurzformat-Eigenschaftsnamen border-width und border. Sie können Werte mit Langformat-Namen wie font-size sowie Kurzformat-Namen wie font abfragen.
• CSS-Eigenschaftswerte können mit der getPropertyValue(propName) Methode oder direkt durch Indizierung in das Objekt mit Array- oder Punktsyntax wie obj['z-index'] oder obj.zIndex abgerufen werden.
• Die von getComputedStyle zurückgegebenen Werte sind aufgelöste Werte. Diese sind in der Regel die gleichen wie die berechneten Werte von CSS 2.1, aber für einige ältere Eigenschaften wie width, height oder padding sind sie stattdessen die gleichen wie die verwendeten 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 die alte Bedeutung der berechneten Werte zurück, jetzt genannt verwendete Werte. Ein Beispielunterschied zwischen Vor- und Nachlayout-Werten umfasst die Auflösung von Prozentwerten für width oder height, da diese nur für verwendete Werte durch ihre Pixeläquivalente ersetzt werden.
• Zur Vermeidung des "CSS History Leak" Sicherheitsproblems geben Browser manchmal absichtlich ungenaue Werte zurück. Um dieses Sicherheitsrisiko zu vermeiden, können Browser falsche Angaben zu den berechneten Stilen für einen besuchten Link machen und Werte zurückgeben, als ob der Benutzer die verlinkte URL nie besucht hätte. Sehen Sie Plugging the CSS history leak und Privacy-related changes coming to CSS :visited an, um Beispiele dafür zu sehen, wie dies implementiert wird.
• Während CSS-Übergängen gibt getComputedStyle den ursprünglichen Eigenschaftswert in Firefox zurück, aber den Endwert 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 umschließenden Block von height:100px anwenden, gibt der berechnete Stil von Firefox für top 70px zurück, da 100 − 30 = 70 ist.
• Aus Kompatibilitätsgründen werden serielle Farbwerte als rgb() Farben ausgedrückt, wenn der Alpha-Kanalwert genau 1 ist, und rgba() Farben andernfalls. In beiden Fällen wird die ältere Syntax mit Kommas als Trennern verwendet (zum Beispiel rgb(255, 0, 0)).

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