Fenster: getDefaultComputedStyle()-Methode

Nicht standardisiert: Diese Funktion ist nicht standardisiert. Wir raten davon ab, nicht-standardisierte Funktionen auf produktiven Webseiten zu verwenden, da sie nur von bestimmten Browsern unterstützt werden und sich in Zukunft ändern oder entfernt werden können. Unter Umständen kann sie jedoch eine geeignete Option sein, wenn es keine standardisierte Alternative gibt.

Die getDefaultComputedStyle()-Methode liefert die standardmäßigen berechneten Werte aller CSS-Eigenschaften eines Elements und ignoriert dabei Autor-Styling. Das heißt, es werden nur User-Agent- und Benutzerstile berücksichtigt.

Syntax

js
getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)

Parameter

element

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

pseudoElt Optional

Ein String, der das zugehörige Pseudo-Element angibt. Muss null sein (oder nicht angegeben) für reguläre Elemente.

Rückgabewert

Der zurückgegebene style ist ein CSSStyleDeclaration-Objekt. Das Objekt ist vom gleichen Typ wie das Objekt, das von Window.getComputedStyle() zurückgegeben wird, berücksichtigt jedoch nur User-Agent- und Benutzerregeln.

Beispiele

Einfaches Beispiel

js
const elem1 = document.getElementById("elemId");
const style = window.getDefaultComputedStyle(elem1);

Längeres Beispiel

html
<style>
  #elem-container {
    position: absolute;
    left: 100px;
    top: 200px;
    height: 100px;
  }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>

<script>
  const elem = document.getElementById("elem-container");
  const theCSSprop = window.getDefaultComputedStyle(elem).position;
  document.getElementById("output").textContent = theCSSprop; // Will output "static"
</script>

Verwendung mit Pseudo-Elementen

Die getDefaultComputedStyle()-Methode kann Stilinformationen von Pseudo-Elementen abrufen (z.B. ::before oder ::after).

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

<h3>generated content</h3>

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

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

Hinweise

Der zurückgegebene Wert ist in bestimmten bekannten Fällen absichtlich falsch, um gezielt Sicherheitsprobleme wie das sogenannte CSS-History-Leak zu vermeiden. Insbesondere können Browser absichtlich "falsche" Werte für einen Link angeben und immer so tun, als hätte ein Benutzer die verlinkte Seite nie besucht, und/oder die Stile begrenzen, die mit dem :visited-Pseudo-Selektor angewendet werden können. Siehe https://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ und https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ für Details zu Beispielen, wie dies implementiert wird.

Spezifikationen

An die CSS-Arbeitsgruppe vorgeschlagen.

Browser-Kompatibilität