Window.getDefaultComputedStyle() — Methode · JavaScript-Referenz

Signatur

window.getDefaultComputedStyle(element, pseudoElt)

Beschreibung

getDefaultComputedStyle() arbeitet ähnlich wie window.getComputedStyle(), beachtet aber nur das Stylesheet des Browsers (User-Agent-Stylesheet) und eventuelle Benutzer-Stylesheets. CSS aus <style>-Blöcken, verlinkten Stylesheets oder style-Attributen der Seite bleibt außen vor. So erfährt man, wie ein Element ohne jedes Seiten-CSS aussehen würde, z. B. dass ein <div> standardmäßig display: block hat.

Das ist praktisch für Entwicklerwerkzeuge, CSS-Reset-Analysen, Tests oder Polyfills, die ein Element auf seinen „natürlichen“ Zustand zurücksetzen wollen. Ein typischer Fall ist das Wiedereinblenden eines Elements: Man stellt dafür den display-Standardwert des Browsers wieder her, statt fest block zu setzen.

Zurück kommt ein schreibgeschütztes, live aktualisiertes CSSStyleDeclaration-Objekt. Einzelne Werte liest man über getPropertyValue() oder über Eigenschaften in camelCase (z. B. style.fontSize).

Wichtig: Die Methode gehört zu keinem Standard und gibt es nur in Firefox. In produktivem Code muss man vorher prüfen, ob sie vorhanden ist, und eine Ausweichlösung bereithalten.

Parameter

Name	Typ	Default	Beschreibung
$element Pflicht	Element		Das Element, dessen berechnete Standardstile abgefragt werden sollen.
$pseudoElt	string \| null	null	Optionales Pseudo-Element, z. B. `"::before"` oder `"::after"`. Für normale Elemente `null` übergeben oder den Parameter weglassen.

Rückgabewert

Typ

CSSStyleDeclaration

Beschreibung

Ein schreibgeschütztes, live aktualisiertes Objekt mit den berechneten Werten aller CSS-Eigenschaften. Berücksichtigt sind nur User-Agent- und Benutzer-Stylesheets.

Beispiele

Browser-Standardwert mit dem tatsächlichen Wert vergleichen

// HTML: <p id="text" style="font-size: 24px; color: red">Hallo</p>
const el = document.getElementById('text');

if (typeof window.getDefaultComputedStyle === 'function') {
  const standard = window.getDefaultComputedStyle(el);
  const aktuell = window.getComputedStyle(el);

  console.log('Standard:', standard.fontSize, standard.color);
  console.log('Aktuell: ', aktuell.fontSize, aktuell.color);
}

Standard: 16px rgb(0, 0, 0) Aktuell: 24px rgb(255, 0, 0)

Element mit dem richtigen display-Standardwert wieder einblenden

// Robuste Hilfsfunktion mit Ausweichlösung für andere Browser
const getNativeDisplay = (el) => {
  if (typeof window.getDefaultComputedStyle === 'function') {
    return window.getDefaultComputedStyle(el).display;
  }
  // Fallback: frisches Element gleichen Typs ohne Seiten-Einfluss messen
  const iframe = document.createElement('iframe');
  iframe.style.cssText = 'position:absolute;width:0;height:0;border:0';
  document.body.append(iframe);
  const probe = iframe.contentDocument.createElement(el.localName);
  iframe.contentDocument.body.append(probe);
  const value = iframe.contentWindow.getComputedStyle(probe).display;
  iframe.remove();
  return value;
};

const show = (el) => {
  el.style.display = getNativeDisplay(el);
};

const item = document.querySelector('li');
item.style.display = 'none';
show(item);
console.log(item.style.display);

list-item

Standardstile eines Pseudo-Elements abfragen

const quote = document.querySelector('q');

if ('getDefaultComputedStyle' in window) {
  const before = window.getDefaultComputedStyle(quote, '::before');
  console.log(before.getPropertyValue('content'));
}

open-quote

// Wichtig · Fallstricke

Kompatibilität: Die Methode ist nicht standardisiert und gibt es nur in Firefox. Chrome, Edge und Safari kennen sie nicht. Vor dem Aufruf deshalb immer mit typeof window.getDefaultComputedStyle === 'function' prüfen.
Das zurückgegebene CSSStyleDeclaration ist schreibgeschützt. Zuweisungen wie style.color = 'red' lösen eine NoModificationAllowedError-Ausnahme aus.
Vererbte Werte stammen trotzdem aus dem Elternkontext, soweit dieser aus Standardstilen berechnet wird. Autorenstile an Vorfahren wirken sich ebenfalls nicht aus.
Benutzer-Stylesheets (z. B. userContent.css) fließen mit ein. Die Ergebnisse können daher je nach Browserprofil unterschiedlich ausfallen.
Wie bei getComputedStyle() kann das Abfragen von Werten eine Stilneuberechnung erzwingen. In Schleifen oder Animationen sollte man den Aufruf deshalb sparsam einsetzen.
Für Code, der in allen Browsern laufen soll, ist getComputedStyle() an einem unberührten Vergleichselement (z. B. in einem leeren iframe) die übliche Ersatzlösung.

Siehe auch

Window.getComputedStyle() CSSStyleDeclaration CSSStyleDeclaration.getPropertyValue() HTMLElement.style Element.computedStyleMap() Window.createImageBitmap() Window.requestFileSystem()