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

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

Zu beachten:

• Das zurückgegebene CSSStyleDeclaration-Objekt enthält aktive Werte für CSS-Eigenschaften Langformen sowie Kurzform-Namen. Beispielsweise enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu border-width und border Kurzformeigenschaftsnamen.
• Die zurückgegebenen Werte sind manchmal bewusst ungenau. Um das Sicherheitsproblem des "CSS History Leak" zu vermeiden, können Browser über die berechneten Stile für einen besuchten Link lügen und Werte zurückgeben, als hätte der Benutzer die verlinkte URL nie besucht. Siehe Verstopfung des CSS History Leak und Datenschutzbezogene Änderungen an 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 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 umgebenden 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 Alphakanalwert genau 1 ist, und rgba()-Farben andernfalls. In beiden Fällen wird die alte Syntax verwendet, mit Kommata als Trenner (zum Beispiel rgb(255, 0, 0)).

Das zurückgegebene Objekt ist der gleiche Typ CSSStyleDeclaration wie das Objekt, das über die 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 inspizieren — einschließlich jener, die durch ein <style>-Element oder ein externes Stylesheet festgelegt sind.
• Das element.style-Objekt sollte verwendet werden, um Stile für dieses Element zu setzen oder Stile zu inspizieren, die direkt durch JavaScript-Manipulation oder das globale style-Attribut hinzugefügt wurden.

TypeError

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

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. Zudem unterstützt der neueste W3-Standard explizit nur ::before und ::after, während der CSS WG-Entwurf diesen Wert nicht einschränkt. Die Browser-Kompatibilität kann variieren.

In diesem Beispiel stylen wir ein <p>-Element, rufen diese Stile dann mit getComputedStyle() ab und geben sie im Textinhalt des <p> aus.

HTML

<p>Hello</p>

CSS

p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  font: 2rem/2 sans-serif;
  text-align: center;
  background: purple;
  color: white;
}

JavaScript

const para = document.querySelector("p");
const compStyles = window.getComputedStyle(para);
para.textContent =
  `My computed font-size is ${compStyles.getPropertyValue("font-size")},\n` +
  `and my computed line-height is ${compStyles.getPropertyValue(
    "line-height",
  )}.`;

Ergebnis

getComputedStyle kann Stilinformationen von Pseudo-Elementen (wie ::after, ::before, ::marker, ::line-marker — siehe die Pseudo-Element-Spezifikation) abrufen.

<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>

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