Skip to main content

Working with CSS Variables and JavaScript DOM (Live Playground)

In this tutorial, we'll explore how to work with CSS variables using JavaScript DOM. You'll learn how to access, set, and modify custom property values in your stylesheets, enabling more dynamic and reusable styles in your web projects.

Introduction to CSS Variables​

CSS variables, also known as custom properties, allow you to store specific values that you can reuse throughout your stylesheet. They are defined using a double hyphen (--) prefix and can be accessed using the var() function.

Here's a simple example of how to define and use a CSS variable:

:root {
  --primary-color: #007bff;
}

body {
  background-color: var(--primary-color);
}

In this example, we've defined a CSS variable --primary-color and assigned it a value of #007bff. We then use this variable as the background color of the body element.

Accessing CSS Variables with JavaScript DOM​

To access a CSS variable using JavaScript DOM, you can use the getComputedStyle method along with the getPropertyValue method. Here's an example:

// Get the computed styles of the root element
var rootStyles = window.getComputedStyle(document.documentElement);

// Access the value of the --primary-color variable
var primaryColor = rootStyles.getPropertyValue('--primary-color').trim();

console.log(primaryColor); // Outputs "#007bff"

Setting CSS Variables with JavaScript DOM​

To set the value of a CSS variable using JavaScript DOM, you can use the setProperty method on an element's style object. Here's an example:

// Set the value of the --primary-color variable on the root element
document.documentElement.style.setProperty('--primary-color', '#ff5722');

// Now, all elements using the --primary-color variable will use the new value

Modifying CSS Variables with JavaScript DOM​

You can also modify the value of a CSS variable using JavaScript DOM by combining the getPropertyValue and setProperty methods. Here's an example:

// Get the current value of the --primary-color variable
var currentPrimaryColor = rootStyles.getPropertyValue('--primary-color').trim();

// Modify the value of the --primary-color variable
var newPrimaryColor = '#ff5722';
document.documentElement.style.setProperty('--primary-color', newPrimaryColor);

console.log('Primary color changed from', currentPrimaryColor, 'to', newPrimaryColor);

Sample Code: Accessing and Modifying CSS Variables​

Here's a complete example that demonstrates how to access and modify CSS variables using JavaScript DOM:

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --primary-color: #007bff;
      }

      body {
        background-color: var(--primary-color);
      }
    </style>
  </head>
  <body>
    <button onclick="changeColor()">Change Background Color</button>

    <script>
      function changeColor() {
        // Access the current value of the --primary-color variable
        var rootStyles = window.getComputedStyle(document.documentElement);
        var currentPrimaryColor = rootStyles.getPropertyValue('--primary-color').trim();

        // Modify the value of the --primary-color variable
        var newPrimaryColor = '#ff5722';
        document.documentElement.style.setProperty('--primary-color', newPrimaryColor);

        console.log('Primary color changed from', currentPrimaryColor, 'to', newPrimaryColor);
      }
    </script>
  </body>
</html>

In this example, clicking the "Change Background Color" button will change the background color of the body element by modifying the --primary-color CSS variable.

Live Playground, Try it Yourself

Conclusion​

CSS variables provide a powerful way to store and reuse values in your stylesheets. By using JavaScript DOM, you can access, set, and modify these variables, enabling more dynamic styling in your web projects. This tutorial has shown you how to work with CSS variables using JavaScript DOM, giving you the knowledge to incorporate this technique into your web development projects.