HTMLTableRowElement.bgColor — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTableRowElement.bgColor

Beschreibung

Die Eigenschaft bgColor von HTMLTableRowElement spiegelt das veraltete HTML-Attribut bgcolor eines <tr>-Elements wider. Beim Lesen erhält man den Attributwert als Zeichenkette. Das kann ein Farbname wie "yellow" oder ein Hexwert wie "#ffcc00" sein. Beim Schreiben setzt der Browser das Attribut bgcolor auf den neuen Wert.

Die Eigenschaft stammt aus den Anfängen von HTML, als Darstellung noch über Attribute gesteuert wurde. Heute gilt sie als veraltet. Die Browser unterstützen sie weiter, damit alte Seiten funktionieren. In neuem Code sollte man sie aber nicht verwenden. Die moderne Lösung ist CSS, entweder über element.style.backgroundColor oder, besser, über CSS-Klassen und Selektoren wie tr:nth-child(even).

Ist kein bgcolor-Attribut vorhanden, liefert die Eigenschaft eine leere Zeichenkette. Sie zeigt also nicht die tatsächlich dargestellte Farbe an. Diese kann aus CSS stammen und lässt sich nur mit getComputedStyle() auslesen.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Zuweisen eine Farbangabe als Zeichenkette, z. B. ein Farbname (`"red"`) oder ein Hexwert (`"#e0e0e0"`). Der Wert wird unverändert in das Attribut `bgcolor` geschrieben.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs bgcolor. Fehlt das Attribut, ist es eine leere Zeichenkette "".

Beispiele

Hintergrundfarbe einer Zeile auslesen

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

#ffcc00 #ffcc00

Legacy-Code: jede zweite Zeile einfärben

const zeilen = document.querySelectorAll('#preise tr');
zeilen.forEach((tr, i) => {
  // Veraltet, funktioniert aber in allen Browsern
  tr.bgColor = i % 2 === 0 ? '#f5f5f5' : '#ffffff';
});
console.log(zeilen[0].outerHTML.startsWith('<tr bgcolor="#f5f5f5"'));

true

Moderne Alternative: von bgColor zu CSS umstellen

// Alte bgcolor-Attribute in Inline-CSS übertragen und entfernen
document.querySelectorAll('tr[bgcolor]').forEach((tr) => {
  tr.style.backgroundColor = tr.bgColor;
  tr.removeAttribute('bgcolor');
  console.log(tr.bgColor === '', tr.style.backgroundColor);
});

true rgb(255, 204, 0)

Attributwert vs. tatsächlich dargestellte Farbe

const tr = document.querySelector('tr');
tr.style.backgroundColor = 'lightblue';
console.log(JSON.stringify(tr.bgColor)); // kein Attribut vorhanden
console.log(getComputedStyle(tr).backgroundColor);

"" rgb(173, 216, 230)

// Wichtig · Fallstricke

Veraltet: Das Attribut bgcolor ist in HTML5 nicht mehr zulässig. Verwende stattdessen CSS, etwa background-color oder Klassen. Die Eigenschaft existiert nur noch aus Gründen der Rückwärtskompatibilität.
Vorrang: CSS-Regeln haben Vorrang vor bgcolor, weil das Attribut nur als Darstellungshinweis mit sehr niedriger Spezifität behandelt wird. Deshalb kann ein gesetztes bgColor scheinbar wirkungslos bleiben.
Keine Normalisierung: Der Rückgabewert ist genau die Zeichenkette aus dem Attribut. Die Eigenschaft liefert weder die berechnete Farbe noch ein einheitliches Format wie rgb(). Für die tatsächlich angezeigte Farbe verwende getComputedStyle(el).backgroundColor.
Browser-Kompatibilität: Alle gängigen Browser unterstützen die Eigenschaft. Da sie veraltet ist, sind aber keine Weiterentwicklungen zu erwarten.
Die Eigenschaft gibt es auch an HTMLTableElement, HTMLTableCellElement und HTMLBodyElement. Der Wert einer Zelle hat bei der Darstellung Vorrang vor dem Wert ihrer Zeile.

Siehe auch

HTMLTableCellElement.noWrap HTMLTableRowElement.cells HTMLTableRowElement.ch HTMLTableRowElement.chOff HTMLTableRowElement.align