Stringwert von style.backgroundColor
Robert B.
- css
- farbe
- javascript
0 Hank0 Rolf B0 Gunnar Bittersmann
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
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
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
)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
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:
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
Hi,
- Farbname
- rgb-Angabe
- hsl-Angabe
- hwb-Angabe
- eine color-mix()-Formel
Und noch mehr.
z.B.:
(ob hex 4stellig/8stellig, also mit Alpha, auch geht, ist mir nicht bekannt; dito für hsva?)
cu,
Andreas a/k/a MudGuard
@@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
.
🖖 Живіть довго і процвітайте
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
Hallo Robert,
Ich denke, du kannst auch rgba() bekommen.
Rolf
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
@@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(…)"
.
🖖 Живіть довго і процвітайте