Window: getComputedStyle() Methode

element

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

pseudoElt Optional

Ein String, der das Pseudo-Element spezifiziert. 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-Eigenschafts-Langnamen sowie Kurzbezeichnungsnamen enthält. Zum Beispiel enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu border-width und border Kurzbezeichnungs-Eigenschaftsnamen.
• Zurückgegebene Werte sind manchmal absichtlich 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 als ob der Benutzer die verlinkte URL nie besucht hätte, zurückgeben. Siehe Plugging the CSS history leak und Privacy-related changes coming to 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 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 Alpha-Kanal-Wert genau 1 ist, und als rgba()-Farben andernfalls. In beiden Fällen wird die alte Syntax verwendet, mit Kommas als Trenner (zum Beispiel rgb(255, 0, 0)).

Das zurückgegebene Objekt ist derselbe 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 inspizieren — einschließlich derjenigen, die durch ein <style>-Element oder ein externes Stylesheet festgelegt wurden.
• Das element.style-Objekt sollte verwendet werden, um Stile zu setzen auf diesem Element oder um 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() ist.

Hinweis: Ein gültiger Pseudo-Element-Selektor bezieht sich auf die syntaktische Gültigkeit, z.B. wird ::unsupported als gültig angesehen, obwohl das Pseudo-Element selbst nicht unterstützt wird.

In diesem Beispiel stylen wir ein <p>-Element, rufen diese Stile mit getComputedStyle() ab und drucken sie in den Textinhalt des <p>.

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