Window getComputedStyle() Methode

Definition und Verwendung

getComputedStyle() Die Methode holt die berechneten CSS-Attribute und -Werte des HTML-Elements ab.

getComputedStyle() Die Methode gibt ein CSSStyleDeclaration-Objekt zurück.

Berechnete Stile

Berechnete Stile beziehen sich auf die Stile, die auf einem Element verwendet werden, nachdem alle Stilquellen angewendet wurden.

Stilquellen: Externe und interne Stilübersichten, vererbte Stile und Standardstile des Browsers.

Siehe auch:

CSSStyleDeclaration-Objekt

Beispiel

Beispiel 1

Berechnete Hintergrundfarbe des Elements abrufen:

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

Probieren Sie es selbst aus

Beispiel 2

Alle berechneten Stile aus dem Element extrahieren:

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>";
}

Probieren Sie es selbst aus

Beispiel 3

Berechnete Schriftgröße der ersten Buchstabe im Element (verwenden Sie das Pseudo-Element):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter");
let size = cssObj.getPropertyValue("font-size");

Probieren Sie es selbst aus

Syntax

window.getComputedStyle(element, pseudoElement)

Parameter

Parameter Beschreibung
element Erforderlich. Das Element, für das der berechnete Stil angefordert wird.
pseudoElement Optional. Der zu erhebende Pseudo-Element.

Rückgabewert

Typ Beschreibung
Objekt Ein CSSStyleDeclaration-Objekt, das alle CSS-Attribute und -Werte des Elements enthält.

Unterschiede zwischen der Methode getComputedStyle() und der style-Eigenschaft

Vergleichen Sie die Methode getComputedStyle() mit der style-Eigenschaft von HTMLElement: Letztere ermöglicht nur den Zugriff auf die Inline-Styles eines Elements, die in jeder von Ihnen angegebenen Einheit vorliegen können, und kann Ihnen keine Informationen über die auf den Stilelementen der Stilübersicht des Elements angewendeten Stile geben.

Browserunterstützung

Unterstützt von allen Browsern getComputedStyle():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung