Window: getDefaultComputedStyle()-Methode

Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch große Inkompatibilitäten zwischen Implementierungen geben, und das Verhalten kann sich in Zukunft ändern.

Die getDefaultComputedStyle()-Methode liefert die Standardwerte der berechneten Werte aller CSS-Eigenschaften eines Elements, ohne die Autoren-Stildefinitionen zu berücksichtigen. Das bedeutet, dass nur Benutzeragenten- und Benutzerstile berücksichtigt werden.

Syntax

getDefaultComputedStyle(element)
getDefaultComputedStyle(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. Muss null sein (oder nicht angegeben), bei normalen Elementen.

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 aus Pseudo-Elementen extrahieren (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 das sogenannte CSS History Leak Sicherheitsproblem zu vermeiden. Insbesondere können Browser absichtlich nicht die korrekten Werte für einen Link anzeigen und immer Werte zurückgeben, 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. Weitere Details zur Implementierung finden Sie unter 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/.

Spezifikationen

Vorgeschlagen an die CSS-Arbeitsgruppe.

Browser-Kompatibilität

BCD tables only load in the browser