Manipulating custom properties with Javascript

Written by Keith Devon on April 10, 2018


Custom Properties (AKA CSS Variables) are a very powerful way to work with variables in your CSS.

One of the most exciting possibilities is the ability to manipulate these variables with JS and have the browser repaint the page immediately.

There are two functions in particular, getPropertyValue() and setProperty(), that I wanted to experiment with.

However, while investigating this, I found that there were very few code examples to work with these functions and to develop an understanding of how you can use them to interact with the Custom Properties.

I made a simple Codepen as an example of how you might get and set custom properties with Javascript.

https://codepen.io/keithdevon/pen/bvzrjK/

I hope that helps you get started. Let me know if you’d like to see any further examples, or if you have suggestions of how to improve this one.