CSS Variables — Part 3 — Accessing variables through Javascript

Earlier, I’ve discussed what CSS Variables are and how you could use them. So let’s see how you could change the value of a CSS variable.

Just like you could read the values of CSS styles using Javascript, you could also read the values declared for these variables.

Let’s say you have a simple markup such as the one shown below, and you wish to get the value of variable --text-color from it.

:root {
 --text-color: blue;
}
body {
 background-color: #eee;
}
p {
 color: var(--text-color);
}

A key feature of CSS Variables to keep in mind is inheritance. It might be misleading to think of CSS Variables as variables — they are rather called Custom Properties in the specification.

Here’s how MDN explains how CSS Variables are unlike normal variables you might expect in Javascript:

Keep in mind that these are custom properties, not actual CSS variables. The value is computed where it is needed, not stored for use in other rules. For instance, you cannot set a property for an element and expect to retrieve it in a sibling’s descendant’s rule. The property is only set for the matching selector and its descendants, like any normal CSS. [Emphasis mine]

So when you refer to the value of a Custom Property, it is specific to the element being discussed (and perhaps its descendants).

In order to get the value of a property, you need to get the computed property values on the element. These are accessible through getComputedStyle method. So, in general, here’s how you could get the value of property --text-color on body element:

var styles = window.getComputedStyle(document.body);
var textColor = styles.getPropertyValue("--text-color");

The code would assign the value "blue" to the variable textColor if you have declared --text-color: blue in the styles for root element.

Here’s a CodePen I have created to show how this works, in case you want to experiment with it.

Question: Can I get the value of a custom property on other elements, like div, span or input?
Yes, you can! Just pass the element into window.getComputedStyle and access the variable’s value using styles.getPropertyValue("--property-name").

Question: Can I use jQuery to get the value of a custom property?
Of course! With jQuery, you could get the value of --text-color using something like $("body").css("--text-color") or $(document.body).css("--text-color") — whichever you prefer.

Setting the value of a variable is just as simple. Let’s say, you have a paragraph element with id special, and you intend to give it an orange color instead of the one defined by root declaration of --text-color property.

<p id="special">
 This is some special text!
</p>

Here’s how you could do that:

var specialParagraph = document.getElementById("special");
specialParagraph.style.setProperty("--text-color", "orange");

Or, if you prefer jQuery:

$("#special").css("--text-color", "orange");

Keep in mind that when you set the value of --text-color on p#special, all of its descendants also inherit the new value of the variable. We’ll discuss how inheritance works with the Custom Properties in a future post, however you can see it in action in CodePen here.

Note that in the example of changing the color of a paragraph with ID set to special you don’t have to use jQuery to change the value of --text-color. You could achieve the same effect by declaring a style:

#special {
  --text-color: orange;
}

This means that the element with ID “special” (and its descendants) will get the value “orange” when they access the property --text-color. So when the color: var(--text-color) is processed for this element, it will get the value “orange”. You can see it in action here.

Next time, I plan to cover the inheritance of CSS properties in a bit more detail.