Window.getComputedStyle() — Methode · JavaScript-Referenz

Signatur

Window.prototype.getComputedStyle(element, pseudoElt)

Beschreibung

getComputedStyle() liefert die Styles, die der Browser tatsächlich auf ein Element anwendet. Das ist das Ergebnis aus allen Stylesheets, der Kaskade, der Vererbung und den Standardwerten. Die Eigenschaft element.style zeigt dagegen nur die Inline-Styles aus dem style-Attribut. Deshalb ist getComputedStyle() das richtige Werkzeug, wenn du wissen willst, wie ein Element wirklich aussieht, etwa welche Farbe, Größe oder Sichtbarkeit es hat.

Das zurückgegebene Objekt (CSSStyleDeclaration, in neueren Spezifikationen CSSStyleProperties) ist live: Wenn sich die Styles des Elements ändern, zeigt es beim nächsten Zugriff automatisch die neuen Werte. Du kannst es aber nicht beschreiben. Ein Schreibversuch wirft einen NoModificationAllowedError. Werte liest du am besten mit getPropertyValue('kebab-case-name') oder über die camelCase-Eigenschaft (style.backgroundColor). Nur mit getPropertyValue() kannst du auch CSS-Custom-Properties (--meine-variable) auslesen.

Die meisten Werte kommen als aufgelöste Werte (resolved values) zurück. Längen stehen dann meist in px, Farben im Format rgb() oder rgba(). Typische Einsatzfälle:

die tatsächliche Größe oder den Abstand eines Elements messen
prüfen, ob ein Element sichtbar ist
CSS-Variablen in JavaScript auslesen, zum Beispiel für ein Theme
den Inhalt von ::before und ::after auslesen
vor einer CSS-Transition einen Reflow erzwingen

Parameter

Name	Typ	Default	Beschreibung
$element Pflicht	Element		Das Element, dessen berechnete Styles gelesen werden sollen. Ist es kein `Element` (z. B. ein Textknoten), wird ein `TypeError` geworfen.
$pseudoElt	string \| null	null	Optionales Pseudo-Element, z. B. `'::before'`, `'::after'` oder `'::placeholder'`. Bei `null` oder ohne Angabe werden die Styles des Elements selbst geliefert.

Rückgabewert

Typ

CSSStyleDeclaration

Beschreibung

Ein schreibgeschütztes Live-Objekt mit den aufgelösten Werten aller CSS-Eigenschaften. Du liest die Werte über getPropertyValue() oder die camelCase-Eigenschaften.

Beispiele

Tatsächliche Farbe und Schriftgröße auslesen

// CSS: .hinweis { color: tomato; font-size: 1.25rem; }
const el = document.querySelector('.hinweis');
const style = getComputedStyle(el);

console.log(style.color);                      // camelCase-Zugriff
console.log(style.getPropertyValue('font-size')); // kebab-case-Zugriff
console.log(el.style.color);                   // nur Inline-Styles -> leer

rgb(255, 99, 71) 20px

CSS-Custom-Property (Theme-Variable) lesen

// CSS: :root { --brand-color: #0066cc; --spacing: 8px; }
const rootStyle = getComputedStyle(document.documentElement);

const brand = rootStyle.getPropertyValue('--brand-color').trim();
const spacing = parseFloat(rootStyle.getPropertyValue('--spacing'));

console.log(brand, spacing * 2);

#0066cc 16

Inhalt eines ::before-Pseudo-Elements auslesen

// CSS: .pflicht::before { content: '* '; color: red; }
const label = document.querySelector('.pflicht');
const before = getComputedStyle(label, '::before');

console.log(before.content);
console.log(before.color);

"* " rgb(255, 0, 0)

Sichtbarkeit prüfen und Transition per Reflow starten

const isVisible = (el) => {
  const s = getComputedStyle(el);
  return s.display !== 'none' && s.visibility !== 'hidden' && parseFloat(s.opacity) > 0;
};

const panel = document.querySelector('#panel');
panel.style.opacity = '0';
panel.hidden = false;
// Lesezugriff erzwingt Style-Berechnung, damit die Transition greift
getComputedStyle(panel).opacity;
panel.style.transition = 'opacity 300ms';
panel.style.opacity = '1';

console.log(isVisible(panel));

true

// Wichtig · Fallstricke

Performance: Jeder Lesezugriff kann eine synchrone Neuberechnung der Styles und des Layouts erzwingen (Reflow). Rufe getComputedStyle() deshalb nicht in engen Schleifen abwechselnd mit DOM-Änderungen auf. Lies die Werte stattdessen gesammelt und schreibe danach.
Nur lesen: Wenn du dem Objekt einen Wert zuweist, wirft das einen NoModificationAllowedError. Zum Setzen nutzt du element.style oder CSS-Klassen.
Kurzschreibweisen wie margin, border oder font liefern je nach Browser unterschiedliche oder leere Werte. Frage deshalb besser die Einzel-Eigenschaften ab, etwa margin-top.
Format der Werte: Längen werden meist in px aufgelöst, Farben als rgb()/rgba(). Bei Werten wie width: auto hängt das Ergebnis davon ab, ob das Element dargestellt wird: Bei display: none kann auto zurückkommen. Die gerenderte Größe misst du zuverlässiger mit getBoundingClientRect().
Custom-Properties werden oft mit führenden Leerzeichen geliefert. Verwende .trim().
Datenschutz: Beim Pseudo-Selektor :visited liefern Browser absichtlich die Werte für nicht besuchte Links, damit sich der Browserverlauf nicht auslesen lässt.
Elemente aus einem anderen Dokument (z. B. aus einem iframe) liest du am besten mit dem defaultView dieses Dokuments aus: el.ownerDocument.defaultView.getComputedStyle(el).
Kompatibilität: Die Methode funktioniert in allen modernen Browsern. Der Internet Explorer unterstützt sie erst ab Version 9, ältere Versionen boten nur currentStyle.

Siehe auch

Window Selection.getComposedRanges() Window.getDefaultComputedStyle() Window.setImmediate() Window.fetchLater()