Window: getComputedStyle() Methode

element

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

pseudoElt Optional

Ein String, der das Pseudo-Element 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.

Beachten Sie, dass:

• Das zurückgegebene CSSStyleDeclaration-Objekt aktive Werte für CSS-Eigenschafts-Langnamen sowie Kurznamen enthält. Zum Beispiel enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu den border-width und border Eigenschaften-Kurzbezeichnungen.
• Zurückgegebene Werte sind manchmal absichtlich ungenau. Um das Sicherheitsproblem des "CSS History Leak" zu vermeiden, können Browser lügen über die berechneten Stile für einen besuchten Link und Werte zurückgeben, als ob der Benutzer die verlinkte URL nie besucht hätte. Siehe Plugging the CSS history leak und Privacy-related changes coming to CSS :visited für Beispiele, wie dies implementiert ist.
• Während CSS-Transitionen gibt getComputedStyle in Firefox den ursprünglichen Eigenschaftswert 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 enthaltenden 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 serielle Farbwerte als rgb() Farben ausgedrückt, wenn der Alphakanalwert genau 1 ist, und als rgba() Farben sonst. In beiden Fällen wird die alte Syntax verwendet, mit Kommas als Trenner (zum Beispiel rgb(255, 0, 0)).

Das zurückgegebene Objekt ist der gleiche CSSStyleDeclaration-Typ 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 auf diesem Element festzulegen oder um Stile zu überprüfen, 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 synaktische Gültigkeit, z. B. wird ::unsupported als gültig angesehen, 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 drucken sie in den Textinhalt des <p>-Elements.

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 zum Beispiel ::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