Window getComputedStyle() Methode

  • Vorherige Seite
  • Nächste Seite
  • Zurück zur übergeordneten Ebene Window-Objekt

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 dem Element verwendet werden, nachdem alle Stilquellen angewendet wurden.

Stilquelle: Externe und interne Stilelemente, 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 abrufen:

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 abrufen (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 Sie die berechneten Stile abrufen möchten.
pseudoElement Optional. Der Pseudo-Element, den Sie abrufen möchten.

Rückgabewert

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

Unterschiede zwischen der Methode getComputedStyle() und dem Attribut style

Verwenden Sie die Methode getComputedStyle() und das style-Attribut von HTMLElement zur对比：Letzteres erlaubt nur den Zugriff auf die Inline-Stile des Elements, die in jeder von Ihnen angegebenen Einheit verwendet werden können, und kann Ihnen keine Informationen über die auf den Stilen der Stilelemente angewendeten Stile geben.

Browser-Unterstützung

Alle Browser unterstützen dies 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
  • Vorherige Seite
  • Nächste Seite
  • Zurück zur übergeordneten Ebene Window-Objekt