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. Nicht angegeben (oder null) für reale Elemente.

Ein live 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 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, auch wenn das Pseudoelement selbst nicht unterstützt wird. Zusätzlich unterstützt der neueste W3-Standard explizit nur ::before und ::after, während der Entwurf des CSS-WG 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 drucken sie in den Textinhalt des <p>.

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 untersuchen – einschließlich derjenigen, die durch ein <style> Element oder ein externes Stylesheet festgelegt wurden.
• Das element.style Objekt sollte verwendet werden, um Stile auf diesem Element festzulegen oder 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, werden einen Fehler auslösen.

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 existiert. Es ist wahrscheinlich, dass das defaultView Muster eine Kombination aus der Abneigung, eine Testspezifikation für window zu schreiben, und der Erstellung einer API, die auch in Java verwendet werden konnte, 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-Eigenschafts-Langnamen sowie Kurznotationen. Zum Beispiel enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu border-width und border Kurznotationen. Sie können Werte mit Langnamen wie font-size ebenso wie mit Kurznotationen wie font abfragen.
• CSS-Eigenschaftswerte können mit der getPropertyValue(propName) Methode oder durch direkte Indizierung in das Objekt mithilfe von Array- oder Punktnotation wie obj['z-index'] oder obj.zIndex abgerufen werden.
• Die von getComputedStyle zurückgegebenen Werte sind aufgelöste Werte. Diese sind in der Regel identisch mit den CSS 2.1 berechneten Werten, aber für einige ältere Eigenschaften wie width, height, oder padding, sind sie stattdessen identisch mit verwendeten Werten. Ursprünglich definierte CSS 2.0 die berechneten Werte als die "benutzungsfertigen" Endwerte der Eigenschaften nach Kaskadierung und Vererbung, aber CSS 2.1 hat sie als pre-Layout und verwendete Werte als post-Layout neu definiert. Für CSS 2.0 Eigenschaften gibt getComputedStyle den alten Sinn der berechneten Werte zurück, die jetzt verwendete Werte genannt werden. Ein Unterschied zwischen pre- und post-Layout-Werten umfasst die Auflösung von Prozentwerten für width oder height, da diese nur für verwendete Werte durch deren Pixeläquivalente ersetzt werden.
• Zur Vermeidung des "CSS History Leak" Sicherheitsproblems geben Browser gelegentlich absichtlich ungenaue Werte zurück. So können die berechneten Stile für einen besuchten Link verfälscht dargestellt werden, als ob der Benutzer die verlinkte URL niemals besucht hätte. Weitere Informationen finden Sie unter Plugging the CSS history leak und Privacy-related changes coming to CSS :visited.
• Während CSS-Übergängen gibt getComputedStyle den ursprünglichen Eigenschaftswert in Firefox zurück, aber den endgültigen 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 umschließenden Block mit 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 Alphakanal-Wert genau 1 ist, und als rgba() Farben andernfalls. In beiden Fällen wird der Alt-Syntax verwendet, mit Kommata als Trenner (zum Beispiel rgb(255, 0, 0)).

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