Change CSS-Style Color Value with JavaScript

Question

I have a box with a style that sets the color of the box to var(--box-color). This variable is defined in a separate CSS file, which I use for constants etc.:

:root{
--box-color: rgba(250,250,250,1.0);
}

I want to make the color of the box lighter using JavaScript. I could just apply a brightness filter using box.style.filter = brightness(...), but that doesn't seem very elegant, and as the box also has children that should not be affected by the dimming, it is not the way to go for me. Is there a way to change the specific color values using JavaScript, with variable initial values? Something like:

box.style.backgroundColor.r -= 10;
box.style.backgroundColor.g -= 10;
box.style.backgroundColor.b -= 10;

I could also do it with String separation, if the color would be defined by an rgba(r,g,b,a) statement, but it is defined with a variable, and I also don't know how to get the value of that variable with JS.

And if you don't understand my problem, feel free to ask in the comment section.

I'm going for a less complicated and more elegant structure now, so this question does not require an answer anymore. I'll not delete it though, in case other people come up with a similar problem.

Christian · Answer 1 · 2017-08-28T13:18:52.083

2

You can get the color value with javascript and split it into r, g, b and a colors for example like that:

let rgba = box.style.backgroundColor.match(/[\d\.]{1,3}/g);
// r === rgba[0]
// g === rgba[1]
// b === rgba[2]
// a === rgba[3]

then you can simply edit the rgba() values and convert them back to the original string:

rgba[3] -= 0.1

box.style.backgroundColor = 'rgba(' + rgba.join(',') + ')';

I just hope this can help somehow. Please tell me, if I don't understand you right.

I'm sorry for the bad Question I wrote before - I still can't write comments :(

edited Aug 28 '17 at 13:18

answered Aug 28 '17 at 13:11

Christian

151
1
11

"I could also do it with String seperation, if the color would be defined by an rgba(r,g,b,a) statement, but it is defined with a variable", thanks for the effort, but this doesn't help in my case. – d0n.key Aug 28 '17 at 13:16
Actually, even though it is not the solution to my problem, it helps me on my way applying macbem's solution. – d0n.key Aug 28 '17 at 13:18

score 2 · Answer 2 · answered Aug 28 '17 at 13:13

CSS Variables are seen as normal CSS properties, so you can just access them normally via element.style, e.g. document.documentElement.style['--variableName'].

Note the usage of document.documentElement as the element we use to grab the styles - you used :root to define the variable, so we have to look for the values at the root element, which in, DOM, is the document.

If you want to set the value of a CSS variable via JS, you can use document.documentElement.style.setProperty('--variableName', value).

In this case, you could just add some different CSS Variables that would store the new color value or just edit the existing one to suit your current needs.

Useful links:

I don't want to change the variable itself, I want to change the color, which holds the variable as an inital value. I could create a new altered `rgba()`, from the variable's content, and set the color to that value. But to do that, I have to let JS find out, what variable the color is using (as I might change that in CSS), but if I check the value of `box.style.backgroundColor` in JS, I get an empty string instead of `var(--whatevervariablethereis)` — d0n.key, Aug 28 '17 at 13:25

Change CSS-Style Color Value with JavaScript

2 Answers2