Window: getComputedStyle() Methode

Syntax

getComputedStyle(element) getComputedStyle(element, pseudoElt) 

Parameter

element

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

pseudoElt Optional

Ein String, der das zu matchende Pseudo-Element angibt. Weggelassen (oder null) für reale Elemente.

Rückgabewert

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

Ausnahmen

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

Beschreibung

Die Methode gibt ein aktives schreibgeschütztes CSSStyleProperties-Objekt zurück, das die aufgelösten Werte aller CSS-Eigenschaften eines Elements enthält, nachdem alle aktiven Stylesheets angewendet und alle Berechnungen dieser Werte aufgelöst wurden.

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

Die Unterscheidung, dass das Objekt aufgelöste Werte enthält, ist wichtig. Für die meisten Eigenschaften, insbesondere solche, die von Layout abhängen wie display, font-size oder line-height, ist der aufgelöste Wert der berechnete Wert. Für Eigenschaften, die von Layout abhängen, kann der verwendete Wert geringfügig vom berechneten Wert abweichen, und dies ist der aufgelöste Wert, der zurückgegeben wird. Für einen animierten Eigenschaftswert ist es der berechnete Wert im aktuellen Punkt der Animation.

Das zurückgegebene Objekt verfügt über Eigenschaften mit Bindestrich-Namen und entsprechenden Camel-Case-Eigenschaften für alle vom Browser unterstützten CSS-Eigenschaften, einschließlich sowohl abgekürzter als auch Langform-Eigenschaften.

Abgekürzte CSS-Eigenschaften des Elements werden in ihre entsprechenden Langform-Eigenschaften erweitert. Zum Beispiel wird ein Element mit dem Stil "border-top: 1px solid black" im zurückgegebenen Objekt durch Eigenschaften mit den Namen border-top und borderTop sowie den entsprechenden Langform-Eigenschaften border-top-color und borderTopColor, border-top-style und borderTopStyle, und border-top-width und borderTopWidth vertreten.

Beachten Sie, dass das zurückgegebene Objekt derselbe Typ ist wie das Objekt, das von der style-Eigenschaft des Elements zurückgegeben wird. Allerdings kann das element.style-Objekt auch verwendet werden, um Stile zu setzen auf diesem Element, und gibt nur die inline festgelegten Stile oder die über JavaScript gesetzten Stile zurück.

Farbwerte

Aus Kompatibilitätsgründen werden serialisierte Farbwerte, die den traditionellen sRGB-Farbraum verwenden, als rgb()-Farben ausgedrückt, wenn der Alphakanal-Wert genau 1 ist, und als rgba()-Farben sonst. Die veraltete Syntax mit Kommata wird verwendet, mit Kommata als Trennzeichen (zum Beispiel rgb(255, 0, 0)).

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

Beispiele

Abrufen von aufgelösten Stilen

In diesem Beispiel stylen wir ein <p>-Element, rufen dann 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

Verwendung mit Pseudo-Elementen

getComputedStyle() kann Stil-Informationen von Pseudo-Elementen abrufen, wie z. B. ::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