Window: 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 gibt die Standard-berechneten Werte aller CSS-Eigenschaften eines Elements zurück und ignoriert dabei Autoren-Styling. Das bedeutet, dass nur Benutzeragent- und Benutzerstile berücksichtigt werden.

In diesem Artikel

Syntax

js
getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)

Parameter

element

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

pseudoElt Optional

Ein String, der das Pseudo-Element angibt, das übereinstimmen soll. Muss null sein (oder nicht spezifiziert) für normale Elemente.

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

Längeres Beispiel

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

css
#elem-container {
  position: absolute;
  left: 100px;
  top: 200px;
  height: 100px;
}

js
const elem = document.getElementById("elem-container");
const theCSSprop = getDefaultComputedStyle(elem).position;
document.getElementById("output").textContent = theCSSprop; // outputs "static"

Verwendung mit Pseudo-Elementen

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

html

<h3>generated content</h3>

css
h3::after {
  content: " rocks!";
}

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

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

Hinweise

Der zurückgegebene Wert ist in bestimmten bekannten Fällen absichtlich falsch. Insbesondere, um das sogenannte CSS History Leak-Sicherheitsproblem zu vermeiden, können Browser ausdrücklich "lügen" über den tatsächlichen Wert für einen Link und immer Werte zurückgeben, als ob ein Benutzer die verlinkte Seite nie besucht hat, 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.