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 Pseudo-Element angibt, das abgeglichen werden soll. Ausgelassen (oder null) für echte Elemente.

Rückgabewert

Ein dynamisches CSSStyleProperties-Objekt, das automatisch aktualisiert wird, wenn die Stile des Elements geändert werden.

Ausnahmen

TypeError

Wenn das übergebene Objekt kein Element ist oder pseudoElt kein gültiger Pseudo-Element-Selektor ist oder ::part() oder ::slotted().

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.

Beschreibung

Die Methode liefert ein dynamisches, schreibgeschütztes CSSStyleProperties-Objekt, das die aufgelösten Werte aller CSS-Eigenschaften eines Elements enthält, nachdem aktive Stylesheets angewendet wurden und alle Berechnungen aufgelöst sind, die diese Werte enthalten können.

Das zurückgegebene Objekt kann verwendet werden, um die Stile des Elements zu inspizieren – einschließlich jener, die inline, mit einem <style>-Element oder über ein externes Stylesheet festgelegt wurden. Da das Objekt schreibgeschützt ist, können Sie es nicht verwenden, um die Stile eines Elements festzulegen. Da es jedoch "dynamisch" ist, wird das zurückgegebene Objekt bei einer Aktualisierung der Elementstile über eine andere API (wie HTMLElement.style) mit dem entsprechenden aufgelösten Wert aktualisiert.

Die Unterscheidung, dass das Objekt aufgelöste Werte enthält, ist wichtig. Für die meisten Eigenschaften, insbesondere diejenigen, die vom Layout abhängen wie display, font-size oder line-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 aufgelöste Wert, der zurückgegeben wird. Für einen animierenden Eigenschaftswert ist es der berechnete Wert zum aktuellen Punkt in der Animation.

Das zurückgegebene Objekt hat dash-benannte und entsprechende camel-case benannte Eigenschaften für alle vom Browser unterstützten CSS-Eigenschaften, einschließlich sowohl Shorthand als auch Langform-Eigenschaften.

Shorthand-CSS-Eigenschaften des Elements werden in ihre entsprechenden Langform-Eigenschaften expandiert. Zum Beispiel würde ein Element mit dem Stil "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, und border-top-width und borderTopWidth repräsentiert werden.

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 zum Setzen von Stilen auf diesem Element verwendet werden und gibt nur die inline gesetzten Stile oder jene über JavaScript zurück.

Farbwerte

Aus Kompatibilitätsgründen werden serialisierte Farbwerte, die mit dem traditionellen sRGB-Farbraum angegeben sind, als rgb()-Farben ausgedrückt, wenn der Alphakanal-Wert genau 1 ist, und als rgba()-Farben andernfalls. 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 mit den entsprechenden funktionalen Ausdrücken serialisiert: lab(), lch(), oklab(), oklch(), color().

Beispiele

Abrufen aufgelöster Stile

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

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 Stilinfos 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!'

Spezifikationen

Browser-Kompatibilität

Siehe auch

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