Signatur
Beschreibung
Die Methode getRGBColorValue() gehört zum alten CSS-Objektmodell aus DOM Level 2 Style. Sie liest einen CSS-Farbwert aus einem CSSPrimitiveValue aus. Das zurückgegebene RGBColor-Objekt enthält die Eigenschaften red, green und blue. Jede davon ist selbst wieder ein CSSPrimitiveValue, dessen Zahlenwert man z. B. mit getFloatValue(CSSPrimitiveValue.CSS_NUMBER) abfragt.
An ein CSSPrimitiveValue kommt man normalerweise über CSSStyleDeclaration.getPropertyCSSValue(), zum Beispiel mit getComputedStyle(el).getPropertyCSSValue('color'). Der Aufruf klappt nur, wenn primitiveType den Wert CSSPrimitiveValue.CSS_RGBCOLOR (25) hat. Bei jedem anderen Typ wirft die Methode eine DOMException.
Die Schnittstelle gilt als veraltet. In neuem Code nimmt man stattdessen den Farb-String aus getComputedStyle() (Browser geben ihn als rgb(…) oder rgba(…) zurück) oder die CSS Typed OM mit element.computedStyleMap(). Die Methode ist hier nur dokumentiert, damit man Altcode versteht und pflegen kann.
Rückgabewert
RGBColor-Objekt mit den schreibgeschützten Eigenschaften red, green und blue. Jede Eigenschaft ist ein CSSPrimitiveValue. Wirft eine DOMException vom Typ InvalidAccessError, wenn der Wert keine Farbe ist.Beispiele
Textfarbe eines Elements auslesen (Altcode, mit Funktionsprüfung)
const el = document.body;
const style = getComputedStyle(el);
if (typeof style.getPropertyCSSValue === 'function') {
const value = style.getPropertyCSSValue('color');
if (value.primitiveType === CSSPrimitiveValue.CSS_RGBCOLOR) {
const rgb = value.getRGBColorValue();
const n = CSSPrimitiveValue.CSS_NUMBER;
console.log(
rgb.red.getFloatValue(n),
rgb.green.getFloatValue(n),
rgb.blue.getFloatValue(n)
);
}
} else {
console.log('getPropertyCSSValue wird nicht unterstützt');
}Moderner Ersatz: Farb-String aus getComputedStyle zerlegen
const parseRGB = (el, prop = 'color') => {
const str = getComputedStyle(el).getPropertyValue(prop);
const [r, g, b, a = 1] = str.match(/[\d.]+/g).map(Number);
return { r, g, b, a };
};
const btn = document.createElement('button');
btn.style.backgroundColor = 'tomato';
document.body.append(btn);
console.log(parseRGB(btn, 'background-color'));Fehlerbehandlung bei Nicht-Farbwerten
const style = getComputedStyle(document.body);
if (style.getPropertyCSSValue) {
try {
// 'margin-top' ist eine Länge, keine Farbe
style.getPropertyCSSValue('margin-top').getRGBColorValue();
} catch (err) {
console.log(err.name);
}
}// Wichtig · Fallstricke
- Veraltet und kaum noch unterstützt: Chrome und Firefox (ab Version 62) haben
getPropertyCSSValue()und damitCSSPrimitiveValueentfernt. Nur WebKit/Safari bietet die API noch an. Vor jedem Aufruf deshalb per Funktionsprüfung testen, ob sie vorhanden ist. - Die Methode wirft einen
InvalidAccessError, wennprimitiveTypenichtCSS_RGBCOLORist. Das gilt z. B. für Schlüsselwörter wiecurrentcolorin bestimmten Kontexten und für Längen. RGBColorhat keine Alpha-Komponente. Transparenz geht beirgba()/hsla()also verloren.- Die Komponenten sind
CSSPrimitiveValue-Objekte und keine Zahlen. Den Zahlenwert liefert erstgetFloatValue(CSSPrimitiveValue.CSS_NUMBER). - Als Ersatz dienen
getComputedStyle(el).color(String-Formatrgb()/rgba()) oder die CSS Typed OM (el.computedStyleMap()). Beachten Sie, dass Farben in der Typed OM je nach Browser nur alsCSSStyleValueohne Farbzerlegung zurückkommen können.