Document.fgColor — Eigenschaft · JavaScript-Referenz

Signatur

Document.fgColor

Beschreibung

document.fgColor ist ein Überbleibsel aus der Anfangszeit des Webs. Die Eigenschaft liest und schreibt das veraltete HTML-Attribut text des <body>-Elements. Das ist die Standard-Textfarbe (Vordergrundfarbe) der Seite. Das Setzen hat dieselbe Wirkung wie <body text="…">.

Laut HTML-Standard gehört die Eigenschaft zu den obsoleten Funktionen. Browser unterstützen sie weiter, damit alte Seiten nicht kaputtgehen. In neuem Code sollte man sie nicht verwenden. Die Textfarbe gehört ins CSS, also body { color: … } oder per Skript document.body.style.color.

Beim Lesen erhältst du den Wert des Attributs genau so, wie er gesetzt wurde. Die Eigenschaft liefert nicht die tatsächlich berechnete Farbe. Ist das Attribut nicht gesetzt oder gibt es kein <body>, ist das Ergebnis meist ein leerer String, auch wenn per CSS eine Farbe gilt. Die wirksame Farbe bekommst du mit getComputedStyle(document.body).color.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Schreiben: eine Farbangabe als String, z. B. ein Farbname (`"red"`) oder ein Hex-Wert (`"#333333"`). Der Wert landet im Attribut `text` des `<body>`-Elements.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des text-Attributs am <body>. Ist nichts gesetzt oder fehlt ein Body, ist es meist ein leerer String "".

Beispiele

Textfarbe lesen und setzen (Legacy-Weg)

// Aktuellen Wert des text-Attributs lesen
console.log(`Vorher: "${document.fgColor}"`);

// Textfarbe setzen – entspricht <body text="#333333">
document.fgColor = '#333333';

console.log(`Nachher: "${document.fgColor}"`);
console.log(document.body.getAttribute('text'));

Vorher: "" Nachher: "#333333" #333333

Unterschied zwischen fgColor und berechneter Farbe

// Farbe nur per CSS gesetzt, das text-Attribut bleibt leer
document.body.style.color = 'rebeccapurple';

console.log(`fgColor: "${document.fgColor}"`);
console.log(`berechnet: ${getComputedStyle(document.body).color}`);

fgColor: "" berechnet: rgb(102, 51, 153)

Moderner Ersatz: Farbe über CSS-Variable umschalten

// Empfohlen statt document.fgColor
const root = document.documentElement;
root.style.setProperty('--text-color', '#1a1a1a');
document.body.style.color = 'var(--text-color)';

// Umschalten, z. B. für einen Dunkelmodus
const toggleDark = (dark) =>
  root.style.setProperty('--text-color', dark ? '#f0f0f0' : '#1a1a1a');

toggleDark(true);
console.log(getComputedStyle(document.body).color);

rgb(240, 240, 240)

// Wichtig · Fallstricke

Veraltet: Der HTML-Standard führt fgColor als obsolet. Browser unterstützen die Eigenschaft nur noch aus Kompatibilitätsgründen. Linter und TypeScript (@deprecated) warnen bei ihrer Verwendung.
CSS gewinnt: Das Attribut text gilt nur als Darstellungshinweis mit sehr niedriger Priorität. Jede CSS-Regel für color am Body oder an einzelnen Elementen überschreibt es. Das Setzen kann deshalb scheinbar wirkungslos bleiben.
Keine berechnete Farbe: Beim Lesen bekommst du nur den Attributwert. Die tatsächlich angezeigte Farbe liefert getComputedStyle().
Ohne <body> (z. B. in einem Skript im <head> vor dem Parsen oder bei Framesets) hat das Setzen keine Wirkung.
Browser-Unterschiede: Ältere Firefox-Versionen haben Farbnamen beim Lesen in Hex-Werte umgewandelt (z. B. \"#ff0000\"). Heutige Browser geben den Attributwert unverändert zurück.
Verwandte, ebenfalls veraltete Eigenschaften: bgColor, linkColor, vlinkColor und alinkColor.

Siehe auch

Document.bgColor Document.linkColor Document.vlinkColor Document.alinkColor Document.body Window.getComputedStyle() HTMLElement.style