Cascading Style Sheets (CSS) is an essential language for designing and styling web pages. It provides a variety of ways to define and apply styles to HTML elements. One of the most significant advantages of CSS is its ability to use variables. CSS variables, also known as custom properties, allow you to define a value once and reuse it throughout your style sheets. This not only makes your code more concise but also makes it easier to maintain.

However, accessing these CSS variables in JavaScript can be a challenge. In this blog post, we’ll explore some ways to get CSS variables in JavaScript.

Using the getComputedStyle Method
The getComputedStyle method is a built-in JavaScript method that returns the computed style of an element. You can use it to get the value of a CSS variable. Here’s an example:

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --primary-color: blue;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const styles = window.getComputedStyle(box);
    const primaryColor = styles.getPropertyValue('--primary-color');                      
    console.log(primaryColor); // "blue"
  </script>
</body>
</html>

In this example, we defined a CSS variable --primary-color and set its value to blue. We then used the getComputedStyle method to get the computed style of the box element and retrieve the value of the --primary-color variable.

Using the style Property

Another way to get CSS variables in JavaScript is by using the style property of an element. This property allows you to get or set the value of a CSS property of an element. Here’s an example:

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --primary-color: blue;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const primaryColor = getComputedStyle(box).getPropertyValue('--primary-color');
    box.style.color = primaryColor;
  </script>
</body>
</html>

In this example, we retrieved the value of the --primary-color variable using the getComputedStyle method, and then we set the color property of the box element to that value.

Using CSS Variables Polyfill

If you need to support older browsers that don’t support CSS variables, you can use a polyfill. A polyfill is a JavaScript script that emulates a feature that is not natively supported by a browser. CSS Variables Polyfill is one such polyfill that allows you to use CSS variables in older browsers. Here’s an example:

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --primary-color: blue;
    }
    .box {
      color: var(--primary-color);
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2.3.2/dist/css-vars-ponyfill.min.js"></script>
</head>
<body>
  <div class="box">Hello World!</div>
  <script>
    cssVars();
  </script>
</body>
</html>

In this example, we defined a CSS variable --primary-color and used it to set the color property of the .box element. We then included the CSS Variables Polyfill script and called the cssVars function to apply the polyfill.