How to access CSS variables using Javascript

Discussion
1

Hey everyone, I wanted to share a simple way to access CSS variables through Javascript.

Sometimes this is necessary so if you ever need it here’s how to do it.

<style>
  // Define your variables at the root level in CSS
  // This can also be in a separate CSS file, and that works just fine
  :root {
    --color_primary: #ff0000;
  }
</style>

<script>
  // This function gets a CSS variable from the root document element
  function getCSSVar(variable) {
    return window.getComputedStyle(document.documentElement).getPropertyValue('--' + variable);
  }

  // Example usage
  document.write('The primary color is: ' + getCSSVar('color_primary'));
</script>

It’s as easy as that Enjoy!

2

Don’t forget you can do math in CSS and use variables!

Maybe not the ideal way but I had a project with multiple columns and a sidebar, built using flexbox.

I defined the number of columns in a variable.

Did some width calculations using Container width divided by that variable.

Then I could just change that variable to dynamically adjust how many columns showed.

I was still in school then, but I thought it was cool.

3

@Aris
I wonder how much of that could be handled with container query units and something like round() these days. Modern CSS is insanely powerful.

4

Toby said:
@Aris
I wonder how much of that could be handled with container query units and something like round() these days. Modern CSS is insanely powerful.

Or just use grid with auto fit…

5

@Sal
Honestly yeah probably just that. I really love modern CSS…

6

@Aris
Shouldn’t you just use… grid instead?

7

Sal said:
@Aris
Shouldn’t you just use… grid instead?

Probably yes! I just didn’t know about grid at that point.

I remember the solution was for creating dynamically sized cards on a storefront, and when the sidebar opened, instead of making the cards smaller, I just reduced the column count instead.

I was a beginner but it worked out.

8

@Aris
Seems like grid would be much better for that since you can set columns dynamically based on how many can fit.

9

Sal said:
@Aris
Seems like grid would be much better for that since you can set columns dynamically based on how many can fit.

I agree!

I just didn’t know grid existed back then in my studies. It may not have been a great overall example of a website (though functional) but I wanted to share something relevant to the original post.

Using CSS variables in math operations and adjusting them with JavaScript feels powerful to me, and I think it has potential.

10

Everyone talks about code smells but no one ever describes what they smell like Fish? Wet dog? Or something rich and vibrant like peach syrup or the smell of dirt after it rains.

11

Fraser said:
Everyone talks about code smells but no one ever describes what they smell like Fish? Wet dog? Or something rich and vibrant like peach syrup or the smell of dirt after it rains.

There’s a list of smells in Martin Fowler’s Refactoring book. Definitely worth a read.

12

Fraser said:
Everyone talks about code smells but no one ever describes what they smell like Fish? Wet dog? Or something rich and vibrant like peach syrup or the smell of dirt after it rains.

The alley next to a dive bar.

13

Fraser said:
Everyone talks about code smells but no one ever describes what they smell like Fish? Wet dog? Or something rich and vibrant like peach syrup or the smell of dirt after it rains.

Exactly! I dislike the term ‘code smell.’

14

Are you looking for something like Style Observer?

15

Be careful, getComputedStyle can be costly if you call it repeatedly.

16

Vaguely related - if you’re using React, you can also set CSS variables like this:

    <Component
      style={{
        ["--mask" as keyof React.CSSProperties]: `url(${mask})`
      }}
    />

(This was for a component where an image mask could be passed in as a prop.)

17

Why would you need this?

18

Lin said:
Why would you need this?

It comes up occasionally For example, I’m configuring Apache eCharts for some reporting software I’m working on.

To style these charts, I need to set colors, font sizes, etc. through Javascript So it’s helpful to link them to the CSS variables like the rest of the system.

Or maybe you face one of those tricky CSS problems where you’ve tried everything but have to fall back on Javascript for layout - and that JS needs the CSS variables.

You won’t need this often but sometimes it’s necessary.

19

@Harley
That makes sense I didn’t know that which is why I was asking Thanks for the info! Downvoted for wanting to learn more :see_no_evil:

20

Lin said:
Why would you need this?

You can access the variable, change it, and thus modify the styles it sets.