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,
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.
[codepen_embed height=”482″ theme_id=”0″ slug_hash=”bvzrjK” default_tab=”js,result” user=”keithdevon”]See the Pen <a href=’https://codepen.io/keithdevon/pen/bvzrjK/’>getPropertyValue with Custom Properties</a> by Keith Devon (<a href=’https://codepen.io/keithdevon’>@keithdevon</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
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.