HTMLFontElement.color — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFontElement.color

Beschreibung

Die Eigenschaft HTMLFontElement.color spiegelt das HTML-Attribut color des veralteten -Elements wider. Der Wert ist ein String und enthält entweder einen Farbnamen wie "red" oder einen hexadezimalen Wert im Format #RRGGBB, z. B. "#ff0000".

Weil die Eigenschaft das Attribut widerspiegelt, gilt: Lesen liefert den Attributwert unverändert zurück (oder "", falls kein Attribut da ist). Beim Schreiben wird das Attribut gesetzt, ohne dass der Wert geprüft oder normalisiert wird. Die tatsächliche Darstellung ermittelt der Browser beim Parsen mit den alten, fehlertoleranten Regeln für veraltete Farbattribute.

Brauchen wirst du die Eigenschaft praktisch nur für Altbestände, etwa beim Verarbeiten oder Umbauen von altem HTML, von Ausgaben alter WYSIWYG-Editoren oder von document.execCommand("foreColor"), das in manchen Browsern  erzeugt. In neuem Code solltest du Farben per CSS setzen, zum Beispiel über element.style.color oder CSS-Klassen.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des color-Attributs, z. B. "red" oder "#00ff00". Gibt es kein Attribut, ist der Wert ein leerer String "". Beim Schreiben wird der zugewiesene Wert in einen String umgewandelt und als Attribut übernommen.

Beispiele

Farbe eines font-Elements lesen und ändern

// HTML: <font id="hinweis" color="red">Achtung!</font>
const font = document.getElementById('hinweis');

console.log(font.color);            // aktueller Attributwert
font.color = '#0066cc';             // Farbe ändern
console.log(font.getAttribute('color'));

red #0066cc

Fehlendes Attribut ergibt leeren String

const font = document.createElement('font');
console.log(JSON.stringify(font.color));

font.color = 'green';
console.log(font.outerHTML);

""

Altes HTML modernisieren: font color in span mit CSS umwandeln

// Ersetzt alle <font color> durch <span style="color: …">
const modernisiereFonts = (root = document) => {
  root.querySelectorAll('font[color]').forEach((font) => {
    const span = document.createElement('span');
    span.style.color = font.color;   // Wert aus dem Attribut übernehmen
    span.append(...font.childNodes); // Inhalt verschieben
    font.replaceWith(span);
  });
};

const container = document.createElement('div');
container.innerHTML = '<p><font color="#cc0000">Wichtig</font> Text</p>';
modernisiereFonts(container);
console.log(container.innerHTML);

Wichtig Text

// Wichtig · Fallstricke

Veraltet:  und damit auch HTMLFontElement.color sind in HTML5 als obsolet eingestuft. Die Browser unterstützen beides weiterhin aus Kompatibilitätsgründen, in neuem Code solltest du sie aber nicht mehr verwenden. Nimm stattdessen CSS (color).
Keine Prüfung: Die Eigenschaft nimmt jeden String an, auch ungültige Werte wie "blau". Zurückgegeben wird immer der rohe Attributwert, nicht die berechnete Farbe. Die tatsächlich dargestellte Farbe bekommst du über getComputedStyle(el).color, und zwar im Format rgb(…).
Fehlertolerantes Parsen: Veraltete Farbattribute werden mit eigenen Altregeln ausgewertet. So erzeugen z. B. "chucknorris" oder Werte ohne # trotzdem eine Farbe. Das Ergebnis kann sich von dem unterscheiden, was CSS aus demselben Wert machen würde.
Vorrang: Präsentationsattribute wie color haben eine sehr niedrige Spezifität. Jede CSS-Regel, die color setzt, überschreibt sie.
In TypeScript ist die Eigenschaft über HTMLFontElement in lib.dom.d.ts typisiert und als @deprecated markiert.

Siehe auch

HTMLFontElement.face HTMLFontElement.size HTMLFormElement.action HTMLFormElement.rel HTMLAreaElement.coords