DieWindow.getComputedStyle() Methode gibt ein Live-Read-Only-Objekt vom TypCSSStyleProperties zurück, das dieaufgelösten Werte aller CSS-Eigenschaften eines Elements enthält, nachdem aktive Stylesheets angewendet und alle Berechnungen dieser Werte aufgelöst wurden.

Syntax

getComputedStyle(element)getComputedStyle(element, pseudoElt)

Parameter

element

DerElement für den die berechneten Stile abgerufen werden sollen.

pseudoEltOptional

Ein String, der das Pseudo-Element angibt, das übereinstimmt.Weggelassen (odernull) für reale Elemente.

Rückgabewert

EinLiveCSSStyleProperties-Objekt, das sich automatisch aktualisiert, wenn sich die Stile des Elements ändern.

Ausnahmen

TypeError

Tritt auf, wenn das übergebene Objekt keinElement ist oderpseudoElt kein gültiger Pseudo-Element-Selektor ist oder wenn es sich um::part() oder::slotted() handelt.

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

Beschreibung

Die Methode gibt ein Live-Read-Only-Objekt vom TypCSSStyleProperties zurück, das dieaufgelösten Werte aller CSS-Eigenschaften eines Elements enthält, nachdem aktive Stylesheets angewendet und alle Berechnungen dieser Werte aufgelöst wurden.

Das zurückgegebene Objekt kann verwendet werden, um die Stile des Elements zu inspizieren — einschließlich derjenigen, die inline, mit einem<style>-Element oder über ein externes Stylesheet gesetzt sind. Da das Objekt schreibgeschützt ist, können Sie es nicht verwenden, um die Stile eines Elements zu setzen. Da es jedoch "live" ist, wird das zurückgegebene Objekt mit dem entsprechenden aufgelösten Wert aktualisiert, wenn Sie die Elementstile mit einer anderen API (wieHTMLElement.style) aktualisieren.

Die Unterscheidung, dass das Objektaufgelöste Werte enthält, ist wichtig. Für die meisten Eigenschaften, insbesondere diejenigen, die vom Layout abhängen, wiedisplay,font-size oderline-height, ist der aufgelöste Wert der berechnete Wert. Für Eigenschaften, die vom Layout abhängen, kann der verwendete Wert geringfügig vom berechneten Wert abweichen, und dies ist der zurückgegebene aufgelöste Wert. Für einen animierten Eigenschaftswert wird es der berechnete Wert an der aktuellen Stelle in der Animation sein.

Das zurückgegebene Objekt hat Bindestrich-benannte und entsprechendeCamelcase benannte Eigenschaften füralleCSS-Eigenschaften, die vom Browser unterstützt werden, einschließlich sowohlKurzform als auch Langform-Eigenschaften.

CSS-Kurzformeigenschaften des Elements werden in ihre entsprechenden Langform-Eigenschaften erweitert. Zum Beispiel wird ein Element mit dem Stil"border-top: 1px solid black" durch Eigenschaften mit den Namenborder-top undborderTop im zurückgegebenen Objekt dargestellt, sowie die entsprechenden Langform-Eigenschaftenborder-top-color undborderTopColor,border-top-style undborderTopStyle, undborder-top-width undborderTopWidth.

Beachten Sie, dass das zurückgegebene Objekt vom selben Typ ist wie das Objekt, das von derstyle Eigenschaft des Elements zurückgegeben wird. Jedoch kann daselement.style Objekt auch verwendet werden, umStile auf diesem Element zu setzen und gibt nur die Inline-Stile oder die via JavaScript gesetzten zurück.

Farbwerte

Aus Kompatibilitätsgründen werden serialisierte Farbwerte, die im traditionellen sRGB-Farbraum angegeben wurden, alsrgb() Farben ausgedrückt, wenn der Alpha-Kanal-Wert genau1 ist, und alsrgba() Farben andernfalls. Die veraltete Syntax mit Kommata wird verwendet, mit Kommata als Trennzeichen (zum Beispielrgb(255, 0, 0)).

Für andereFarbräume werden die Werte unter Verwendung der entsprechenden Funktionalen Ausdrücke serialisiert:lab(),lch()oklab(),oklch(),color().

Beispiele

Abrufen aufgelöster Stile

In diesem Beispiel stylen wir ein<p>-Element, rufen diese Stile dann mitgetComputedStyle() 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

Verwendung mit Pseudo-Elementen

getComputedStyle() kann Stilinformationen vonPseudo-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!'

Spezifikationen

Browser-Kompatibilität

Siehe auch

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