How to use css variable with javascript

CssHow-ToBeginner · 4 min read

How to Use CSS Variables with JavaScript: Simple Guide

You can use getComputedStyle to read a CSS variable and style.setProperty to change it on an element in JavaScript. CSS variables are accessed with --variable-name syntax inside getPropertyValue and setProperty methods.

📐

Syntax

To read a CSS variable in JavaScript, use getComputedStyle(element).getPropertyValue('--variable-name'). To change it, use element.style.setProperty('--variable-name', 'new-value').

element: The HTML element where the CSS variable is defined or inherited.
--variable-name: The name of the CSS variable, always starting with two dashes.
new-value: The new value you want to assign to the CSS variable.

javascript

const root = document.documentElement;

// Read CSS variable
const color = getComputedStyle(root).getPropertyValue('--main-color').trim();

// Change CSS variable
root.style.setProperty('--main-color', 'blue');

💻

Example

This example shows how to read and update a CSS variable --main-bg-color on the <html> element to change the background color dynamically.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Variable with JavaScript</title>
<style>
  :root {
    --main-bg-color: lightcoral;
  }
  body {
    background-color: var(--main-bg-color);
    font-family: Arial, sans-serif;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    flex-direction: column;
  }
  button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    border-radius: 0.3rem;
  }
</style>
</head>
<body>
  <h1>Background color changes with CSS variable</h1>
  <button id="changeColorBtn">Change Background Color</button>

  <script>
    const root = document.documentElement;
    const button = document.getElementById('changeColorBtn');

    button.addEventListener('click', () => {
      // Read current color
      const currentColor = getComputedStyle(root).getPropertyValue('--main-bg-color').trim();

      // Toggle color
      const newColor = currentColor === 'lightcoral' ? 'mediumseagreen' : 'lightcoral';

      // Set new color
      root.style.setProperty('--main-bg-color', newColor);
    });
  </script>
</body>
</html>

Output

A webpage with a coral background and white text. Clicking the button toggles the background color between coral and green.

⚠️

Common Pitfalls

Forgetting to trim the value returned by getPropertyValue can cause unexpected spaces.
Trying to set a CSS variable on an element that does not inherit it or is not styled by it may have no visible effect.
Using element.style.setProperty only changes the inline style, so if the variable is defined elsewhere, it may be overridden.
Not prefixing the variable name with -- when using getPropertyValue or setProperty will cause errors.

css

/* Wrong: Missing dashes in variable name */
root.style.setProperty('main-bg-color', 'blue'); // Does nothing

/* Right: Include dashes */
root.style.setProperty('--main-bg-color', 'blue');

📊

Quick Reference

Action	JavaScript Code	Description
Read CSS variable	getComputedStyle(element).getPropertyValue('--var-name')	Gets the current value of a CSS variable.
Set CSS variable	element.style.setProperty('--var-name', 'value')	Changes the CSS variable value inline on the element.
Variable name format	'--var-name'	CSS variables always start with two dashes.
Trim value	value.trim()	Remove extra spaces from the returned value.

✅

Key Takeaways

Use getComputedStyle(element).getPropertyValue('--var-name') to read CSS variables in JavaScript.

Use element.style.setProperty('--var-name', 'value') to update CSS variables dynamically.

Always include the two dashes (--) prefix when accessing CSS variables.

Trim the returned value from getPropertyValue to avoid extra spaces.

Changing CSS variables via JavaScript affects inline styles and can update styles instantly.