Manipulating Custom Properties with Javascript

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.

[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.

Keith

About the author

Co-founder and lead front-end developer at Highrise Digital. Keith has a passion for building beautiful, fast and usable websites.