How to change CSS variables through javascript?

CSS variables are custom properties that are generated by the developer and consist of a particular name and value. The advantage of using these variables is that once declared these can be used anywhere else in the document and prevents you from writing redundant CSS values again and again.

However, sometimes in certain scenarios such as when designing a responsive website, or fetching certain data from the database you would require either to fetch, or update values of certain CSS variables. Therefore, this can be done by using the JavaScript getComputedStyle() method, and setProperty() method.

Below we have demonstrated with the help of an example how to change CSS variables using JavaScript.

How to change CSS variables through JavaScript

For the purpose of understanding how to change a CSS variable using JavaScript let’s consider an example.


<p>This is some paragraph.</p>

<button type="button" onclick="getfontfamily()">Get font family</button>

<button type="button" onclick="setfontfamily()">Set font family</button>

We are creating a <p> element to apply some styling to it using CSS variables and then creating two buttons to get and set CSS variables using JavaScript.


Now first of all, we are creating some global variables in the :root selector and providing them some values.

:root {

--font-family: Times New Roman;

--font-size: 30px;


Now in order to use these variables on the paragraph follow the code snippet below.

p {

color: brown;

font-family: var(--font-family);

font-size: var(--font-size);


In the code above, we are giving the paragraph some color and using the var() function, we are accessing our CSS variables to provide font family and font size to the paragraph.

Now, we want to update the values of the CSS variables using JavaScript. Here is how you do it. In the code below we are basically fetching as well as updating the value of the –font-family variable.


var store = document.querySelector(':root');

function getfontfamily() {

var value = getComputedStyle(store);

alert("Initial font family: "+ value.getPropertyValue('--font-family'));


function setfontfamily() {'--font-family', 'Verdana');


In the above code, we are creating a variable by the name “store” to store all the CSS variables declared in the :root selector using the querySelector() method.

We are then generating a function “getfontfamily” to fetch the variables that were initially saved in the “store” variable by using the getComputedStyle() method, and afterward we are using alert() function to show the initial value of the variable corresponding to the font family.

Lastly we are again generating another function “setfontfamily()” to set the new value of the –font-family variable using the setProperty() method.


This is how initially our web page looks like.

Click on the get button to fetch the value of the original font-family.

After clicking.

The initial font-family is Times New Roman.

To update the font-family click on the set button.

After the button is clicked.

The –font-family variable has been updated to “Verdana” successfully.


For the purpose of fetching, or updating the values of certain CSS variables through JavaScript there are two methods available. The first one is the getComputedStyle() method to fetch the value of a variable, meanwhile, to update the value of a variable using the setProperty() method. Changing CSS variables through JavaScript come in handy in scenarios such as when designing a responsive website, or fetching certain data from the database. This tutorial discusses how to change these variables through JavaScript with the help of a suitable example.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.