Fenster: getComputedStyle()-Methode

element

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

pseudoElt Optional

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

Ein live CSSStyleDeclaration-Objekt, das sich automatisch aktualisiert, wenn die Stile des Elements geändert werden.

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. Darüber hinaus unterstützt der aktuelle W3-Standard explizit nur ::before und ::after, während der Entwurf der CSS-Arbeitsgruppe diesen Wert nicht einschränkt. Die Browser-Kompatibilität kann variieren.

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

Das zurückgegebene Objekt ist vom gleichen Typ CSSStyleDeclaration 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 der Stile, die durch ein <style>-Element oder ein externes Stylesheet festgelegt wurden.
• Das element.style-Objekt sollte verwendet werden, um Stile an diesem Element festzulegen oder Stile, die direkt aus JavaScript-Manipulationen oder dem globalen style-Attribut hinzugefügt wurden, zu inspizieren.

Das erste Argument muss ein Element sein. Nicht-Elemente, wie ein Text-Knoten, werfen einen Fehler.

In vielen Codebeispielen wird getComputedStyle vom document.defaultView-Objekt aus verwendet. In fast allen Fällen ist dies unnötig, da getComputedStyle auch im window-Objekt existiert. Wahrscheinlich war das defaultView-Muster eine Kombination aus dem Wunsch, keine Testspezifikation für window schreiben zu müssen, und dem Bedürfnis, eine API bereitzustellen, die auch in Java verwendet werden kann.

getComputedStyle kann Stilinformationen von Pseudo-Elementen abrufen (wie ::after, ::before, ::marker, ::line-marker — siehe die Pseudo-Element-Spezifikation).

<style>
  h3::after {
    content: " rocks!";
  }
</style>

<h3>Generated content</h3>

<script>
  const h3 = document.querySelector("h3");
  const result = getComputedStyle(h3, ":after").content;

  console.log("the generated content is: ", result); // returns ' rocks!'
</script>

• Das zurückgegebene CSSStyleDeclaration-Objekt enthält aktive Werte für CSS-Eigenschafts-Langnamen sowie Kurzbezeichnungen. Zum Beispiel enthält das zurückgegebene Objekt Einträge für border-bottom-width zusätzlich zu den Kurzbezeichnungen border-width und border Kurzbezeichnungseigenschaften. Sie können Werte mit Langnamen wie font-size sowie mit Kurzbezeichnungen wie font abfragen.
• Den CSS-Eigenschaftswerten kann mit der Methode getPropertyValue(propName) oder durch direktes Indizieren in das Objekt mit Array- oder Punkt-Notation wie obj['z-index'] oder obj.zIndex zugegriffen werden.
• Die von getComputedStyle zurückgegebenen Werte sind aufgelöste Werte. Diese entsprechen normalerweise den berechneten Werten von CSS 2.1, aber für einige ältere Eigenschaften wie width, height oder padding, sind sie stattdessen dieselben wie verwendete Werte. Ursprünglich definierte CSS 2.0 die berechneten Werte als die „einsatzbereiten“ Endwerte von Eigenschaften nach Kaskadierung und Vererbung, aber CSS 2.1 definierte sie als Vorlayout und verwendete Werte als Postlayout. Für CSS 2.0-Eigenschaften gibt getComputedStyle die alte Bedeutung der berechneten Werte zurück, jetzt als verwendete Werte bezeichnet. Ein Beispielunterschied zwischen Vor- und Nach-Layout-Werten umfasst die Auflösung von Prozentwerten für width oder height, da diese nur für verwendete Werte durch ihren Pixeläquivalent ersetzt werden.
• Zur Vermeidung des Problems des „CSS-History-Leaks“ geben Browser manchmal absichtlich ungenaue Werte zurück. So kann es sein, dass die berechneten Stile für einen besuchten Link zurückgegeben werden, als wäre die verknüpfte URL nie besucht worden. Siehe Das CSS History Leak schließen und Datenschutzbezogene Änderungen bei CSS :visited für Beispiele, wie dies implementiert wird.
• Während CSS-Übergängen gibt getComputedStyle in Firefox den ursprünglichen Eigenschaftswert zurück, aber den endgültigen Eigenschaftswert in WebKit.
• In Firefox geben Eigenschaften mit dem Wert auto den verwendeten Wert und nicht den Wert auto zurück. 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.
• Aus Kompatibilitätsgründen werden serielle Farbwerte als rgb()-Farben ausgedrückt, wenn der Alpha-Kanal-Wert genau 1 ist, und als rgba()-Farben in allen anderen Fällen. In beiden Fällen wird die alte Syntax verwendet, mit Kommata als Trennzeichen (zum Beispiel rgb(255, 0, 0)).

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