Stringwert von style.backgroundColor

[Robert B.]

Hallo,

mit der Eigenschaft style eines Nodes habe ich ja Zugriff auf die für die Node definierten CSS-Regeln, z.B. auch die Farben wie die backgroundColor. Wenn ich mir die Ausgabe davon anschaue, dann scheint das immer ein String mit der Farbdefinition in Form der rgb(…)-Funktion von CSS zu sein:

<p id="test" style="color:blue;background-color:#ffc">Fast wie hier</p>

console.log(document.getElementById('test').style.backgroundColor);

rgb(255, 255, 204)

Das Hex-Triplet ffc entspricht dem dezimalen Triplet 255 255 204, das ist soweit korekt. Aber wenn ich mit den Farben jetzt weiter arbeiten möchte, müsste ich den String rgb(…) parsen. Oder habe ich da eine Schnittstelle übersehen?

Vielen Dank und viele Grüße
Robert

[Hank]

hi,

Wenn Du mit den Farbwerten weiterarbeiten möchtest, könntest Du die RGB-Werte aus diesem String extrahieren.

Also in etwa so (ungetestet):

function getRGBValues(colorString) {
    const match = colorString.match(/rgb\((\d+), (\d+), (\d+)\)/);
    if (match) {
        const [, red, green, blue] = match.map(Number);
        return { red, green, blue };
    }
    return null;
}

const backgroundColor = document.getElementById('test').style.backgroundColor;
const rgbValues = getRGBValues(backgroundColor);

if (rgbValues) {
    console.log(rgbValues.red, rgbValues.green, rgbValues.blue);
}

Alternativ kannst Du auch mit Bibliotheken arbeiten, die hierfür gedacht sind, wie chroma.js oder TinyColor.

Hank

[Robert B.]

Moin Hank,

Wenn Du mit den Farbwerten weiterarbeiten möchtest, könntest Du die RGB-Werte aus diesem String extrahieren.

so werde ich das machen. Nach Rolfs Hinweis hole ich mir die Werte in der Klammer und benutze die Farbraum-Angabe davor, also wird rgb(r, g, b) zerlegt in

• rgb (oder rgba)
• das Farbtriplet r,g,b.

Alternativ kannst Du auch mit Bibliotheken arbeiten, die hierfür gedacht sind, wie chroma.js oder TinyColor.

Das bietet sich dann bei abgefahreneren Aufgaben an. Für das Zerlegen eines Strings ist das wohl etwas viel Overhead 😉

Viele Grüße
Robert

[Rolf B]

Hallo Robert B.,

ja, ist nervig. Es allerdings besser, einen rgb() Ausdruck zu haben und zu wissen, was man zu erwarten hat, als dass man den String bekommt, der im style-Attribut angegeben ist. Das kann sein:

• Farbname
• rgb-Angabe
• hsl-Angabe
• hwb-Angabe
• eine color-mix()-Formel

Und noch mehr. Leider ist mir kein API bekannt, das rgb() Angaben in andere Formate umrechnet. Fürs Farbwähler-Helferlein im Wiki habe ich einen eigenen rgb->hsl Umrechner programmiert. Zumindest die HSL-Form vom Browser zu bekommen wäre prima.

Zum Weiterverarbeiten von Farben ist color-mix vielleicht ganz nützlich. Das ist neu, aber schon gut unterstützt, nur bisher nicht im Wiki, und es scheint auch ein Höllenteil zu sein. Guck mal bei Mozilla, ob Dir das was hilft.

I zu verkaufen: Schreibe ein color-mix Tutorial…

Rolf

[MudGuard]

Hi,

• Farbname
• rgb-Angabe
• hsl-Angabe
• hwb-Angabe
• eine color-mix()-Formel

Und noch mehr.

z.B.:

• hsla
• rgba
• hsv
• hex 3stellig
• hex 6stellig

(ob hex 4stellig/8stellig, also mit Alpha, auch geht, ist mir nicht bekannt; dito für hsva?)

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

ob hex 4stellig/8stellig, also mit Alpha, auch geht, ist mir nicht bekannt

Geht.

Hex 4stellig wird in der CSSBattle gern verwendet, um Zeichen zu sparen. Siehe Top-Lösung von Target 73: p{color:#1436 – das gibt vor gelbem Hintergrund das Hellgrün, ein Zeichen kürzer als p{color:998235.

🖖 Живіть довго і процвітайте

[Robert B.]

Hallo @Rolf B

ja, ist nervig. Es allerdings besser, einen rgb() Ausdruck zu haben und zu wissen, was man zu erwarten hat, als dass man den String bekommt, der im style-Attribut angegeben ist.

kann ich mich denn auf das Format rgb(…) verlassen? Denn dann wüsste ich das Farbmodell und könnte mit sehr einfacher String-Bearbeitung das Farbtriplet extrahieren:

const rgb = ….style.backgroundColor.substr(4).split(', ');

Viele Grüße
Robert

[Rolf B]

Hallo Robert,

Ich denke, du kannst auch rgba() bekommen.

Ansonsten...

Rolf

[Robert B.]

Hallo @Rolf B,

Ich denke, du kannst auch rgba() bekommen.

guter Punkt. Aber der String ist ja immer noch gut parsebar: vorne steht das Farbmodell und in den Klammern das Werte-Triplet.

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Robert B.

mit der Eigenschaft style eines Nodes habe ich ja Zugriff auf die für die Node definierten CSS-Regeln

Njein. Du hast damit Zugriff auf per style-Attribut oder per JavaScript gesetzten Werte. Du hast damit keinen Zugriff auf im style-Element oder im externen Stylesheet gesetzten Werte.

Mit getComputedStyle() hast du auch Zugriff auf im style-Element oder im externen Stylesheet gesetzten Werte.

Wenn ich mir die Ausgabe davon anschaue, dann scheint das immer ein String mit der Farbdefinition in Form der rgb(…)-Funktion von CSS zu sein

Nein. Bei transparenten Farben ist es "rgba(…)".

Und nein. Bei mit Schlüsselwörtern gesetzten Farben liefert style das Schlüsselwort zurück, bspw. "rebeccapurple" oder "transparent".

getComputedStyle() liefert auch bei mit Schlüsselwörtern gesetzten Farben "rgb(…)" bzw. "rgba(…)" zurück.

"rgb(…)" bzw. "rgba(…)" bekommst du aber nur bei Farben aus dem sRGB-Farbraum. Bei Farben, die sich nicht mit sRGB darstellen lassen, bekommst du was anderes: bspw. "color(…)".

🖖 Живіть довго і процвітайте

[Robert B.]

Hallo @Gunnar Bittersmann,

vielen Dank für die Ergänzungen!

Viele Grüße
Robert