---
title: CSS Change Variables With JavaScript
description: "> ## Change Variables With JavaScript CSS variables have access to the DOM, which means that you can change them with JavaScript. Here is an example of how you can create a script to display and change the –blue variable…"
url: "https://apprentice.mn/docs/css-change-variables-with-javascript/"
updated: "2021-05-12"
category: CSS
---

# CSS Change Variables With JavaScript

> ## Change Variables With JavaScript

CSS variables have access to the DOM, which means that you can change them with JavaScript.

Here is an example of how you can create a script to display and change the –blue variable from the example used in the previous pages. For now, do not worry if you are not familiar with JavaScript. You can learn more about JavaScript in our [JavaScript Tutorial](https://apprentice.mn/docs-category/javascript/):

     `<script>
// Get the root element
var r = document.querySelector(':root');

// Create a function for getting a variable value
function myFunction_get() {
  // Get the styles (properties and values) for the root
  var rs = getComputedStyle(r);
  // Alert the value of the --blue variable
  alert("The value of --blue is: " + rs.getPropertyValue('--blue'));
}

// Create a function for setting a variable value
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>`

## Browser Support

The numbers in the table specify the first browser version that fully supports the `var()` function.

| Function | Chrome | Internet explorer | Mozila Firefox | Safari | Opera |
| --- | --- | --- | --- | --- | --- |
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |

---

## CSS var() Function

| Property | Description |
| --- | --- |
| var() | Inserts the value of a CSS variable |

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-change-variables-with-javascript%2F&linkname=CSS%20Change%20Variables%20With%20JavaScript](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-change-variables-with-javascript%2F&linkname=CSS%20Change%20Variables%20With%20JavaScript)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-change-variables-with-javascript%2F&linkname=CSS%20Change%20Variables%20With%20JavaScript](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-change-variables-with-javascript%2F&linkname=CSS%20Change%20Variables%20With%20JavaScript)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-change-variables-with-javascript%2F&linkname=CSS%20Change%20Variables%20With%20JavaScript](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-change-variables-with-javascript%2F&linkname=CSS%20Change%20Variables%20With%20JavaScript)[https://www.addtoany.com/share](https://www.addtoany.com/share)