How to get and set CSS variables with JavaScript

Jul 20, 2023#css #javascript #how-to

CSS variables are custom properties that can be declared and used in your stylesheets. A good way to use them is when it comes to the colors, fonts, layouts, or other aspects of your design that you want to keep consistent and easy to modify.

/* Define color variables in root */
:root {
  --primary-color: #1e90ff;
  --secondary-color: #ffffff;
}

/* Use color variables in other selectors */
body {
  background-color: var(--primary-color);
}

h1 {
  color: var(--secondary-color);
}

A common best practice is to define custom properties on the :root pseudo-class, which matches the document’s root element (usually the <html> element). CSS variables in root have a global scope, which means they can be accessed and used throughout the document.

Please note that CSS variables are scoped, meaning they are affected by the CSS rules that apply to the element where they are defined. To access a CSS variable from JavaScript, make sure it is defined on an element that is accessible to your JavaScript code.

Getting CSS variables with JavaScript

To get the value of a CSS variable with JavaScript, you can use the getComputedStyle() function. This function returns an object that contains the computed values of all CSS properties applied to an element. To get the value of the given CSS variable, you can then call the getPropertyValue() method on the returned object, passing the name of the variable as a string.

/* style.css */

:root {
  --color-font-general: #000000;
}

// index.js

// Get the root element
var root = document.documentElement;

// Get the computed styles of the root element
var style = getComputedStyle(root);

// Get the value of the --color-font-general variable
var color = style.getPropertyValue('--color-font-general');

// Log the value to the console
console.log(color); // #336699

Setting CSS variables with JavaScript

To set the value of a CSS variable with JavaScript, you can use the setProperty() method on the element’s style property. The setProperty() method takes two parameters, the name of the CSS variable and its value, both as strings, and applies them to the given element.

/* style.css */

:root {
  --color-font-general: #000000;
}

// index.js

// Get the root element
var root = document.documentElement;

// Set the value of the --color-font-general variable to #000000
root.style.setProperty('--color-font-general', '#000000');

To get and set CSS variables in non-root elements from JavaScript, you can use the same methods as for root elements, but you need to specify the element that has the CSS variable declared.

Benefits of using CSS variables

They minimize repetition in style sheets, which saves time and effort when making changes to your design.
They make the code easier to read and maintain, by using semantic identifiers and grouping related values together.
They enable easier theming, by allowing you to switch between different sets of variables for different looks and feels.
They allow you to read and write pivotal style properties with JavaScript, by using the getComputedStyle() and setProperty() methods.
They can improve performance by reducing the amount of CSS that needs to be parsed by the browser, as CSS variables are only evaluated when they are used.

share twitter send feedback