Window: getComputedStyle() Methode

Syntax

getComputedStyle(element)
getComputedStyle(element, pseudoElt)

Parameter

element

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

pseudoElt Optional

Ein String, der das Pseudoelement spezifiziert, das abgeglichen werden soll. Ausgelassen (oder null) für reale Elemente.

Rückgabewert

Ein Live 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 Pseudoelement-Selektor ist oder ::part() oder ::slotted() ist.

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

Beschreibung

Die Methode gibt ein Live-Readonly-Objekt CSSStyleProperties zurück, das die aufgelö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 festgelegt sind. Da das Objekt schreibgeschützt ist, können Sie es nicht zur Einstellung von Stilen eines Elements verwenden. Da es jedoch "live" ist, wird das zurückgegebene Objekt aktualisiert, wenn Sie die Styles des Elements mit einer anderen API (wie HTMLElement.style) ändern, und zeigt die entsprechenden aufgelösten Werte an.

Der Unterschied, dass das Objekt aufgelöste Werte enthält, ist wichtig. Für die meisten Eigenschaften, insbesondere solche, die nicht von der Layout-Position abhängen, wie display, font-size oder line-height, ist der aufgelöste Wert der berechnete Wert. Für Eigenschaften, die von der Layout-Position abhängen, kann sich der verwendete Wert geringfügig vom berechneten Wert unterscheiden, und dies ist der aufgelöste Wert, der zurückgegeben wird. Für einen animierenden Eigenschaftswert ist es der berechnete Wert zum aktuellen Zeitpunkt der Animation.

Das zurückgegebene Objekt hat Bindestrich-benannte und entsprechende Camel-Case benannte Eigenschaften für alle vom Browser unterstützten CSS-Eigenschaften, einschließlich sowohl Kurzschreibweise als auch Langform-Eigenschaften.

Kurzschrift-CSS-Eigenschaften des Elements werden in ihre entsprechenden Langform-Eigenschaften expandiert. Zum Beispiel würde ein Element mit dem Style "border-top: 1px solid black" im zurückgegebenen Objekt durch Eigenschaften mit den Namen border-top und borderTop sowie die entsprechenden Langform-Eigenschaften border-top-color und borderTopColor, border-top-style und borderTopStyle, sowie border-top-width und borderTopWidth dargestellt.

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

Farbwerte

Aus Gründen der Kompatibilität werden serialisierte Farbwerte, die unter Verwendung des traditionellen sRGB-Farbraums angegeben werden, als rgb() Farben ausgedrückt, wenn der Alpha-Kanal-Wert genau 1 ist, und rgba() Farben ansonsten. Die veraltete Syntax mit Kommas wird verwendet, mit Kommas als Trenner (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

Aufgelöste Stile abrufen

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

Verwendung mit Pseudoelementen

getComputedStyle() kann Stilinformationen von Pseudoelementen 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