{"id":15935,"date":"2017-07-25T06:30:57","date_gmt":"2017-07-25T12:30:57","guid":{"rendered":"http:\/\/vanseodesign.com\/?p=15935"},"modified":"2023-05-24T15:10:06","modified_gmt":"2023-05-24T21:10:06","slug":"custom-properties-and-javascript","status":"publish","type":"post","link":"https:\/\/vanseodesign.com\/css\/custom-properties-and-javascript\/","title":{"rendered":"CSS Custom Properties—Dynamic Changes With And Without Javascript"},"content":{"rendered":"

Have you ever wished you could change the value of a Sass or Less variable after your page has loaded? I have. Unfortunately, it\u2019s not something you can do as the variables cease to be variables once the preprocessed code is compiled into CSS. You don\u2019t have the same limitation with CSS custom properties.<\/p>\n

<\/p>\n

I\u2019ve been talking about custom properties for a few weeks now. I began by showing you how to define and use them<\/a> and then offered some simple examples to make your code more readable and to help with contextual styling<\/a>. Last week I showed you how you can work with custom properties inside @media queries<\/a>.<\/p>\n

At the start of this series I mentioned that one of the major advantages of custom properties is their dynamic nature. Where preprocessor variables are turned into fixed values on compile, custom properties can change their values after a page has loaded.<\/p>\n

I touched on this dynamic ability last week when talking about @media queries. Today I want to continue and look at how we can make changes through user interaction and Javascript.<\/p>\n

Changing CSS Custom Properties Without Javascript<\/h2>\n

While most of the dynamic magic will require a little bit of Javascript, let\u2019s start with a simple example and change the value of a custom property on :hover<\/a>. Know that this will work on any pseudo class<\/a> and not only :hover<\/p>\n

Here\u2019s how we might change the background color of divs using custom properties. I added some CSS to define a width and height and defined a custom property –background with a value of #ccc. I then set the background-color property using the var() function and gave it a transition of 1s just because.<\/p>\n

[code type=css]
\ndiv {
\n width: 15em;
\n height: 15em;<\/p>\n

–background: #ccc;
\n background-color: var(–background);
\n transition: background-color 1s;
\n}
\n[\/code]<\/p>\n

To change the background color I redefined the custom property on the :hover pseudo class<\/a> and assigned it a new value of #cce.<\/p>\n

[code type=css]<\/p>\n

 div:hover {\r\n  --background: #cce;\r\n}<\/pre>\n
[\/code]<\/p>\n
Realistically we could have done this without the use of custom properties by changing the background-color property directly or even with the use of preprocessor variables.<\/p>\n
It\u2019s a fair point, particularly with an example as simple as this one, but imagine you\u2019re changing more than the background color<\/a>. Maybe you want to change background color, text color, and various font properties. You still wouldn\u2019t need custom properties, but as we saw the last couple of weeks this method can result in cleaner and more readable code.<\/p>\n
Changing CSS Custom Properties With Javascript<\/h2>\n
Where things get really interesting is when we use Javascript to change the values of custom properties.<\/p>\n
There are two things we need to be able to do to use Javascript with custom properties. We need to know how to get the value of a custom property and also how to set a new value on a custom property.<\/p>\n
Get the Value of a Custom Property<\/h3>\n
To read the value you use two Javascript functions, window.getComputedStyle<\/a> and getPropertyValue<\/a>. The former method will get every computed CSS property and value of every element and the latter method can be used to get the value of specific properties.<\/p>\n
[code type=javascript]
\nvar style = window.getComputedStyle(element[, pseudoElt]);
\nvar value = style.getPropertyValue(property);
\n[\/code]<\/p>\n
If you work with Javascript, this is probably nothing new. However, if you aren\u2019t familiar with Javascript, you might like an example. Here\u2019s a little CSS where I defined a –color custom property inside :root and assigned it a value of red.<\/p>\n
[code type=css]
\n:root {
\n –color: red
\n}
\n[\/code]<\/p>\n
We\u2019ll use the getComputedStyle() and getPropertyValue() methods to read the value of –color. The first line of Javascript below gets all the styles of document.documentElement<\/a> (the way to reference :root) and assigns the result to the Javascript variable, styles.<\/p>\n
The second line gets the specific value for the –color custom property defined in :root and assigns that value to a new variable colorValue. In this case –color is the only property, but in practice there would likely be others.<\/p>\n
[code type=javascript]
\nvar styles = getComputedStyle(document.documentElement);
\nvar colorValue = styles.getPropertyValue(‘–color’);
\n[\/code]<\/p>\n
The variable colorValue should now hold a value of red, which is the value I initially set on –color in the CSS. To proves this to yourself you can use the alert() function to show the value on your screen.<\/p>\n
[code type=javascript]
\nalert(colorValue);
\n[\/code]<\/p>\n
Set the Value of a Custom Property<\/h3>\n
To set a new value on a custom property you use the style.setProperty method<\/a>.<\/p>\n
[code type=javascript]
\nstyle.setProperty(propertyName, value, priority);
\n[\/code]<\/p>\n
Note that setProperty can take three parameters. The first two are necessary as they identify the property to change and the new value it will be assigned. The third parameter, priority, is optional and allows you to set !important, though as a general rule you don\u2019t want to do this.<\/p>\n
Technically the value parameter is also optional and if you leave it out, it will be treated as an empty string. Most of the time you\u2019ll want to set a value, but leaving it out is a way to change the custom property to an empty string.<\/p>\n
It\u2019s easier to set a new value than to read the existing one as we don\u2019t need to hold anything temporarily in a variable. Again document.documentElement is the :root so this line of code changes the value of the :root custom property –color to green.<\/p>\n
[code type=javascript]
\ndocument.documentElement.style.setProperty(‘–color’, ‘green’);
\n[\/code]<\/p>\n
In fact, the property doesn\u2019t even need to exist before setting a new value. You could set the custom property initially inside a setProperty method, if you\u2019d like.<\/p>\n
Remove the Value of a Custom Property<\/h2>\n
There\u2019s also a removeProperty() function to remove the entire property and its value. If for some reason you want to remove the –color custom property, you could do this.<\/p>\n
[code type=javascript]
\ndocument.documentElement.style.removeProperty(‘–color’);
\n[\/code]<\/p>\n
Together getPropertyValue, setProperty, and removeProperty offer a lot of options for changing custom properties on the fly.<\/p>\n
Changing Color Values with a Color Picker<\/h2>\n
Now that we\u2019ve seen how to get and set the values of custom properties, as well as how to remove the property entirely, let\u2019s try an example showing how you might use this information in practice. Again, I\u2019ll keep the example as simple as possible for the sake of explanation.<\/p>\n
Here I created an empty div and an input with a type of color so users can access their default color picker. We want to let users select a color and then have their selection become the background color for the div.<\/p>\n
[code type=html]<\/p>\n
<\/div>\n

\n[\/code]<\/p>\n
The CSS is simple as well. I created a custom property (–background) inside the :root and assigned it a value of #ccc. I gave the div a width and height and using the var() function set its background color to the value of the –background custom property. I also centered the div using auto left and right margins.<\/p>\n
I then set the input to display as a block level element<\/a>, gave it a width, and also used auto margins to center it<\/a>. None of this is necessary, but I think it makes for a more presentable example.<\/p>\n
The important part for this example is the custom property.<\/p>\n
[code type=css]
\n:root {
\n –background: #ccc;
\n}<\/p>\n
div {
\n width: 20em;
\n height: 20em;
\n margin: 1em auto;
\n background: var(–background);
\n}<\/p>\n
input {
\n display: block;
\n width: 10em;
\n margin: 1em auto;
\n}
\n[\/code]<\/p>\n
Now for the Javascript. First we need to grab a hook to the color input. I used the document.querySelector method<\/a>, which matches the specified selector, in this case the element with an id of div-bkgd, which is the input element. I assigned the value to a variable called colorInput.<\/p>\n
Next I added an event listener to colorInput, which will listen for any change to the color input and then run a function. The function uses setProperty to redefine the –background custom property with the new color value.<\/p>\n
[code type=javascript]
\nvar colorInput = document.querySelector(“#div-bkgd”);<\/p>\n
colorInput.addEventListener(“change”, function() {
\n document.documentElement.style.setProperty(“–background”, this.value);
\n});
\n[\/code]<\/p>\n
Here\u2019s a demo I set up so you can see this in action. Select a color from the color picker and the background color of the div should change to your selection.<\/p>\n
Note<\/strong>: The color input doesn\u2019t yet have universal support<\/a>. It doesn\u2019t work in IE or any version of Safari, though the latter should let you type in a hex color as opposed to letting you choose one from a color picker.<\/p>\n
I also added another type of input (the range input) to the demo to allow you to control the font-size of some text I added inside the div. The code is very similar to how I changed the background color here. The main difference (aside from the different type of input) is that you have to append the units to the font-size.<\/p>\n
I also made a few tweaks in the demo to set dimensions in terms of rem units instead of em units so that the divs don\u2019t change size as you adjust the font-size.<\/p>\n
Additional Examples<\/h2>\n
Because I kept the examples on the simpler side, I want to point you to a few that are a little more complex so you can see more of the power of custom properties when combined with Javascript.<\/p>\n
Here are three examples that use sliders and color pickers to alter the values of custom properties. They all use similar techniques to the demo I created, though each does so in greater detail.<\/p>\n