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

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

Beachten Sie, dass:

• Das zurückgegebene CSSStyleDeclaration-Objekt aktive Werte für CSS-Eigenschaftsnamen in Langform sowie Kurzform enthält. Beispielsweise enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu den border-width und border Kurzformeigenschaftsnamen.
• Zurückgegebene Werte sind manchmal absichtlich ungenau. Um das Sicherheitsproblem "CSS-Verlaufleak" zu vermeiden, können Browser über die berechneten Stile eines besuchten Links lügen und Werte zurückgeben, als hätte der Benutzer die verlinkte URL nie besucht. Siehe Plugging the CSS history leak und Privacy-related changes coming to CSS :visited für Beispiele, wie dies umgesetzt wird.
• Während CSS-Übergängen gibt getComputedStyle in Firefox den ursprünglichen Eigenschaftswert, in WebKit jedoch den endgültigen Eigenschaftswert zurück.
• In Firefox geben Eigenschaften mit dem Wert auto den benutzten 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 ist.
• Aus Kompatibilitätsgründen werden serialisierte Farbwerte als rgb()-Farben ausgedrückt, wenn der Alphakanalwert genau 1 ist, und als rgba()-Farben andernfalls. In beiden Fällen wird die alte Syntax verwendet, mit Kommata als Trennzeichen (zum Beispiel rgb(255, 0, 0)).

Das zurückgegebene Objekt ist vom selben 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 inspizieren — 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 das Element festzulegen oder um Stile zu untersuchen, die direkt durch JavaScript-Manipulation oder das globale style-Attribut hinzugefügt wurden.

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, auch wenn das Pseudo-Element selbst nicht unterstützt wird.

In diesem Beispiel stylen wir ein <p>-Element, rufen dann diese Stile mit getComputedStyle() ab und geben sie in den 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 abrufen, wie ::after, ::before, ::marker oder ::line-marker.

<h3>Generated content</h3>

h3::after {
  content: " rocks!";
}

const h3 = document.querySelector("h3");
const result = getComputedStyle(h3, "::after").content;

console.log("the generated content is: ", result); // returns ' rocks!'

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