Access CSS variable from javascript [duplicate]

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
– Trash Can, Commented Jan 18, 2017 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
– Delon, Commented Nov 8, 2018 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
– Jaden Baptista, Commented Jan 1, 2019 at 1: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
– Claus Wahlers, Commented Jan 8, 2019 at 5:00
@ClausWahlers which is why I'm here lolol, had to refresh myself on this, been a while — Cephas
– Cephas, Commented Oct 7, 2024 at 18:21

Kalnode · Accepted Answer · 2024-12-15 23:04:19Z

381

Just the standard way:

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

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

Example:

var style = window.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 Dec 15, 2024 at 23:04

Kalnode

11.7k3 gold badges44 silver badges76 bronze badges

answered Jan 18, 2017 at 17:27

Oriol

291k71 gold badges459 silver badges535 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Okku Over a year ago

@webkitfanz you do realize that css variables are not supported in IE, right?

Ryan Over a year ago

Is there a way to do this without causing a reflow as getComputedStyle will do this?

Eric Mutta Over a year ago

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).

Nermin Over a year ago

@EricMutta I just experienced this. So annoying. Why would they return with a leading space in the string?

Unmitigated Over a year ago

@Lilboat It doesn't matter; window is the global object.

|

Louay Alakkad · Accepted Answer · 2017-11-12 15:24:25Z

88

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, 2017 at 15:24

answered Jan 18, 2017 at 17:26

Louay Alakkad

7,4882 gold badges26 silver badges45 bronze badges

4 Comments

okcoker Over a year ago

It actually would be document.documentElement.style.setProperty('--color-font-general', '#000'); if you wanted to change it.

Louay Alakkad Over a year ago

whoops fixed. thanks!

Rudie Over a year ago

You can also get it like that: element.style.getPropertyValue()

shennan Over a year ago

@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)

Collectives™ on Stack Overflow

Access CSS variable from javascript [duplicate]

2 Answers 2

8 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Linked

Related