Access CSS variable from javascript

Question

Is there a way to access a css variable from javascript? Here my css variable declaration.

:root {
  --color-font-general: #336699;
}

I am really curious as to why you don't want to re-declare that variable in javascript which is more efficient — Trash Can, Jan 18 '17 at 17:29
@Dummy Then there would be two places in which the value needed to be maintained, making the code more fragile (i.e. not a DRY approach). — Delon, Nov 08 '18 at 10:27
In my case, I don't know which CSS file it's using. The user decides the file, and each file has different values for this variable. — Jaden Baptista, Jan 01 '19 at 01:10
Also, if you have CSS variables that have different values depending on which active `@media` query defines them, you save yourself even more work and duplicate code. — Claus Wahlers, Jan 08 '19 at 05:00

score 290 · Accepted Answer · edited Jan 03 '21 at 19:09

290

Just the standard way:

Get the computed styles with getComputedStyle
Use getPropertyValue to get the value of the desired property

getComputedStyle(element).getPropertyValue('--color-font-general');

Example:

var style = getComputedStyle(document.body)
console.log( style.getPropertyValue('--bar') ) // #336699
console.log( style.getPropertyValue('--baz') ) // calc(2px*2)

:root { --foo:#336699; --bar:var(--foo); --baz:calc(2px*2); }

edited Jan 03 '21 at 19:09

vsync

118,978
58
307
400

answered Jan 18 '17 at 17:27

Oriol

274,082
63
437
513

Looks like it isn't working in IE 10, any pointers in the right direction? – webkitfanz Apr 04 '19 at 01:52
16

@webkitfanz you do realize that css variables are not supported in IE, right? – Okku Apr 28 '19 at 04:36
2

Is there a way to do this without causing a reflow as getComputedStyle will do this? – Ryan Aug 06 '19 at 23:57
4

Note that the value returned has the leading space, so you would get " #336699" instead of "#336699". This matters if you are trying to check the value (it may not match because of that leading space, so consider trimming it before checking). – Eric Mutta Mar 28 '20 at 10:24
1

@EricMutta I just experienced this. So annoying. Why would they return with a leading space in the string? – Nermin Aug 20 '20 at 09:37
It should be `window.getComputedStyle` mate. – Lil boat Nov 10 '20 at 15:00
@Lilboat It doesn't matter; `window` is the global object. – Unmitigated Jun 03 '23 at 18:26
None of these solutions is working for us. – Kirk Sefchik Sep 01 '23 at 17:24

Louay Alakkad · Answer 2 · 2017-11-12T15:24:25.247

59

Use this:

window.getComputedStyle(document.documentElement).getPropertyValue('--color-font-general');

And you can change it like this:

document.documentElement.style.setProperty('--color-font-general', '#000');

source

edited Nov 12 '17 at 15:24

answered Jan 18 '17 at 17:26

Louay Alakkad

7,132
2
22
45

3

It actually would be `document.documentElement.style.setProperty('--color-font-general', '#000');` if you wanted to change it. – okcoker Nov 11 '17 at 05:00
whoops fixed. thanks! – Louay Alakkad Nov 12 '17 at 15:24
3

You can also get it like that: `element.style.getPropertyValue()` – Rudie Oct 13 '18 at 14:39
6

@Rudie `element.style.getPropertyValue()` will only work if the variable has been set on the inline style of the element (not through a CSS rule) – shennan Jun 27 '19 at 16:21

Access CSS variable from javascript

2 Answers2

Linked

Related