HTMLTableCellElement.bgColor — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableCellElement.bgColor

Beschreibung

Die Eigenschaft bgColor von HTMLTableCellElement (also <td> und <th>) spiegelt das Inhaltsattribut bgcolor wider. Wer sie liest, bekommt den Attributwert als Zeichenkette. Wer sie setzt, schreibt das Attribut bgcolor direkt in das Element.

Der Wert kann ein Farbname wie "yellow" oder ein Hex-Wert wie "#ffcc00" sein. Ist das Attribut nicht gesetzt, gibt die Eigenschaft eine leere Zeichenkette "" zurück. Die per CSS berechnete Hintergrundfarbe gibt sie nicht zurück.

Die Eigenschaft ist veraltet. Sie funktioniert zwar noch in allen Browsern, sollte in neuem Code aber nicht mehr verwendet werden. Heute setzt man die Farbe über CSS: entweder mit element.style.backgroundColor oder, besser, mit CSS-Klassen. Sinnvoll ist bgColor nur noch, wenn man altes HTML auslesen oder umwandeln will.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: ein Farbwert wie `"red"` oder `"#ff0000"`. Er wird unverändert in das Attribut `bgcolor` geschrieben.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs bgcolor oder "", wenn das Attribut fehlt.

Beispiele

Attributwert auslesen

// HTML: <table><tr><td id="zelle" bgcolor="#ffcc00">Hinweis</td></tr></table>
const zelle = document.getElementById('zelle');
console.log(zelle.bgColor);
console.log(zelle.getAttribute('bgcolor'));

#ffcc00 #ffcc00

Hintergrundfarbe setzen (veraltete Variante)

const zelle = document.querySelector('td');
zelle.bgColor = 'lightgreen';
console.log(zelle.outerHTML);

Altes Markup auf CSS umstellen

// Alle Zellen mit bgcolor-Attribut in Inline-Styles umwandeln
document.querySelectorAll('td[bgcolor], th[bgcolor]').forEach((zelle) => {
  zelle.style.backgroundColor = zelle.bgColor;
  zelle.removeAttribute('bgcolor');
});
console.log(document.querySelectorAll('[bgcolor]').length);

// Wichtig · Fallstricke

Veraltet: bgColor wird in HTML5 als veraltet geführt. Die Browser unterstützen es nur noch aus Gründen der Abwärtskompatibilität. Verwende stattdessen CSS, etwa background-color.
Die Eigenschaft liefert nur den Wert des Attributs. Farben, die per Stylesheet gesetzt wurden, bekommst du über getComputedStyle(zelle).backgroundColor.
Beim Setzen wird der Wert nicht geprüft und nicht vereinheitlicht. Aus "red" wird also kein "#ff0000". Ungültige Werte werden trotzdem übernommen und können von den Browsern unterschiedlich dargestellt werden.
CSS-Regeln für background-color, auch Inline-Styles, haben Vorrang vor dem bgcolor-Attribut.

Siehe auch

HTMLProgressElement.position HTMLTableCellElement.ch HTMLTableCellElement.scope HTMLTableCellElement.abbr HTMLTableCellElement.chOff