HTMLTableElement.bgColor — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableElement.bgColor

Beschreibung

Die Eigenschaft bgColor eines HTMLTableElement spiegelt das HTML-Attribut bgcolor des <table>-Elements wider. Sie enthält einen String mit einer Farbangabe, etwa einen Farbnamen ("lightblue") oder einen Hex-Wert ("#ffcc00"). Wenn man einen Wert zuweist, wird das Attribut im DOM geändert. Wenn man den Wert liest, erhält man den Attributwert genau so, wie er im Attribut steht. Der Browser normalisiert ihn nicht.

Die Eigenschaft stammt aus der Zeit vor CSS und gilt in HTML5 als veraltet. Für neuen Code solltest du stattdessen die CSS-Eigenschaft background-color verwenden, zum Beispiel über table.style.backgroundColor oder besser über eine CSS-Klasse.

Sinnvoll ist bgColor heute vor allem in diesen Fällen:

bei der Pflege von Altbestand oder HTML-E-Mail-Vorlagen, in denen noch bgcolor-Attribute vorkommen,
beim Auslesen oder Bereinigen solcher Attribute, zum Beispiel bei der Umstellung auf CSS.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Nur beim Setzen: eine Farbangabe als String, z. B. `"red"` oder `"#00ff00"`. Der Wert wird unverändert in das Attribut `bgcolor` geschrieben.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs bgcolor. Wenn das Attribut fehlt, ist das Ergebnis ein leerer String "".

Beispiele

Hintergrundfarbe lesen und setzen

// <table id="preise" bgcolor="#eeeeee">...</table>
const table = document.getElementById('preise');

console.log(table.bgColor);

table.bgColor = 'lightyellow';
console.log(table.getAttribute('bgcolor'));

#eeeeee lightyellow

Fehlendes Attribut ergibt leeren String

const table = document.createElement('table');
console.log(JSON.stringify(table.bgColor));
console.log(table.hasAttribute('bgcolor'));

"" false

Altbestand auf CSS umstellen

// Alle bgcolor-Attribute von Tabellen in Inline-CSS überführen
document.querySelectorAll('table[bgcolor]').forEach((table) => {
  table.style.backgroundColor = table.bgColor;
  table.removeAttribute('bgcolor');
});

console.log(document.querySelectorAll('table[bgcolor]').length);

// Wichtig · Fallstricke

Veraltet: Die Eigenschaft ist nicht mehr Teil der empfohlenen HTML-Praxis. Verwende stattdessen CSS mit background-color. Alle Browser unterstützen bgColor weiterhin, damit alte Seiten funktionieren.
Kein berechneter Wert: bgColor liefert nur den Attributwert. Farben, die per CSS gesetzt sind, erscheinen hier nicht. Die tatsächlich angezeigte Farbe bekommst du mit getComputedStyle(table).backgroundColor, im Format rgb(...).
CSS hat Vorrang: Das Attribut bgcolor zählt nur als Darstellungshinweis und hat eine sehr niedrige Spezifität. Jede CSS-Regel für background-color überschreibt es.
Schreibweise: Die Eigenschaft heißt bgColor mit großem C, das HTML-Attribut dagegen bgcolor. table.bgcolor legt nur eine eigene, wirkungslose JavaScript-Eigenschaft an.
Kein Prüfen des Werts: Ungültige Farbangaben werden ohne Fehlermeldung übernommen. Der Browser wertet sie mit einem eigenen, älteren Verfahren aus, das oft unerwartete Farben ergibt, z. B. bei \"chucknorris\".

Siehe auch

HTMLTableElement HTMLTableCellElement.bgColor HTMLTableRowElement.bgColor HTMLElement.style Window.getComputedStyle() Element.setAttribute() HTMLSourceElement.srcset