UI Development

How can CSS variables be managed in JavaScript

CSS variables are predominantly used by CSS authors to cache arbitrary values to a style property with any relevant variable name. It basically can be reused anywhere later in the css document which helps in better readability of the code. Thus, the defined variable can be reused further for any element which requires the same styling property with the same value. In few cases there would be a need to change this value of the CSS variable with respect to some actions performed on the web page by the user. Do you think its not possible? Of course it is possible to dynamically manage the value for any CSS variable. Here we will be seeing how it is managed through the power of JavaScript.

Before going into JavaScript action lets do a quick read on how CSS variables work in general.

5 things you need to know about CSS variables

  1. CSS variables are just the custom property used to cache a particular value in order to increase performance and to increase the readability of our code.
  2. Declaration: Must be declared within some CSS selector (generally to the root or the body element) like this,

  3. Using the variable: var() function can be used to pass in the variable name as a property to it wherever necessary like this,

  4. Don’t use variables if your UI has to support IE browser as CSS variables wont be supported in IE any versions. For more detailed browser support list, you can always find it in https://caniuse.com/#search=css%20variables
  5. These CSS variables can be accessed and modified dynamically using Javascript.

Accessing and managing CSS variables through JS

We can easily access and manage the CSS variables just by following these 2 steps:

  • For accessing the CSS variables which is declared under the “:root” selector, you can use the document.documentElement which will target the root of the document and returns as an element object. If your variables are declared under “body” element selector you can directly access it using the document.querySelector(‘body’) query selector. However query selector can also be used to target the root element like document.querySelector(‘:root’).
  • Now for modifying the arbitrary value of the selected variable as per your requirement scope, you can simply achieve it through the very powerful setProperty() method from javascript. The syntax [object.setProperty(propertyName, value)] will have the property name to be changed along with the new value that has to be updated to the variable.

Demo

Let me walk you through a quick demo to explain how these js methods can be used to change the value of the CSS variables dynamically. Here, I have used a simple HTML structure to display 6 rectangular boxes having 6 different colors for each one of them. So when the user clicks on any of the rectangular box, the color of the cube will be set as the background for a heading element thereby changing/updating the cached value of the CSS variable.

HTML

The HTML code consists of two <div> tags. One for the <h1> element whose background color is passed through CSS variable initially which will be modified dynamically using JS later. Second div wraps 6 <span> elements which should be clicked by the user to select a color that has to be applied as background for the heading.

 

CSS

Declared a variable on body selector and re using it on line 6. The colors that can be changed from <span> are mentioned on line numbers 11,15,19, 23, 27 and 31.

JS

Lets understand the JS code line by line:

1.Selecting the body element and caching it in a variable named ‘body’.

2. Selecting all the span elements and caching it in a variable named ‘color’.

4. Running a forEach() loop to iterate all the 6 <span> elements.

5. Adding an event Listener to track the click function of the target.

6. In order access the applied stylesheet getComputedStyle() method is used which returns an object that will contain all the CSS properties and its value for the targeted element. It is cached in a variable named ‘clickedStyle’.

7. Selecting the background-color property from the object and passing it to a variable named ‘backgroundColor’.

8. Now the setProperty() method is used to change the value of the CSS variable with the value of the <span> element clicked by the user.

OUTPUT

Have attached the output screenshots.

Left Image: On page load, the heading with the background having its valued from the CSS variable.

Right Image: After the user has clicked on the purple rectangular box, color of the background has been updated with the color of the clicked rectangle element.

Conclusion

CSS variables can be easily modified using JS with the above discussed three main useful methods (document.querySelector(), setProperty(), getComputedStyle()) . Apart from ‘click’ event it can also be handled in other events like ‘change, mouseover, mouseout, keydown’ etc. In the above demo, I have played around the background property, likewise any style properties can be managed by JavaScript dynamically as per your requirment.

Hope this blog has helped you to understand how CSS variables can be accessed and modified dynamically through JS.

About The Author