Fenster getComputedStyle()
Beispiel
Holen Sie sich die berechnete Hintergrundfarbe eines Elements:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
Weitere Beispiele unten.
Definition und Verwendung
Die getComputedStyle()
Methode ruft die berechneten CSS-Eigenschaften und -Werte eines HTML-Elements ab.
Die getComputedStyle()
Methode gibt eine zurück
CSSStyleDeclaration object
.
Berechneter Stil
Der berechnete Stil ist der Stil, der für das Element verwendet wird, nachdem alle Stilquellen angewendet wurden.
Stilquellen: externe und interne Stylesheets, geerbte Stile und Standardstile des Browsers.
Siehe auch:
Syntax
window.getComputedStyle(element, pseudoElement)
Parameter
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
Rückgabewert
Typ | Beschreibung |
Ein Objekt | Ein CSSStyleDeclaration-Objekt mit allen CSS-Eigenschaften und -Werten des Elements. |
Mehr Beispiele
Holen Sie sich alle berechneten Stile von einem Element:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
cssObjProp = cssObj.item(x)
text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
Ermitteln Sie die berechnete Schriftgröße des ersten Buchstabens in einem Element (unter Verwendung eines Pseudo-Elements):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
Browser-Unterstützung
getComputedStyle()
wird in allen Browsern unterstützt:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |