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.
Syntax
getDefaultComputedStyle(element)
getDefaultComputedStyle(element, pseudoElt)
Parameter
element-
Das
Element, für das der berechnete Stil abgerufen werden soll. pseudoEltOptional-
Ein String, der das Pseudo-Element angibt, das übereinstimmen soll. Muss
nullsein (oder nicht spezifiziert) für normale 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, aber es werden nur Benutzeragenten- und Benutzerregeln berücksichtigt.
Beispiele
Einfaches Beispiel
const elem = document.getElementById("elemId");
const style = getDefaultComputedStyle(elem);
Längeres Beispiel
<div id="elem-container">dummy</div>
<div id="output"></div>
#elem-container {
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
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).
<h3>generated content</h3>
h3::after {
content: " rocks!";
}
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.
Spezifikationen
Dem CSS-Arbeitsgruppe vorgeschlagen.