Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Updating CSS Variables with JavaScript

6:41 with Guil Hernandez

CSS Variables are not only updated using the cascade and inheritance, you can also read and write (or get and set) CSS variable values from your JavaScript.

CSS variables are not only updated using the cascade and inheritance. 0:00
You can also read and write or get and set CSS variable values from your JavaScript. 0:05
For example, in this demo, 0:10
the ball moves around the page using a CSS transform based on where you click. 0:12
And its color changes to a random hex value. 0:17
The background color and transform properties of the ball 0:19
are being updated live with JavaScript and CSS variables. 0:22
To have CSS variables interact with JavaScript at runtime, 0:27
you use the getPropertyValue method to get the value of a custom property and 0:31
the setProperty method to set the value. 0:36
If you haven't written a lot of JavaScript yet that's okay, 0:39
I'm going to teach you how to create this fun demo using the set property method. 0:41
We also have lots of JavaScript workshops and courses here at Treehouse, so 0:45
be sure to check the teachers note to learn more. 0:49
First, in variables.css, I'll use var and 0:51
custom properties to set the background color and 0:55
transform values of the ball class. 0:59
So first I'll add the background color property. 1:03
And set its value to var, passing it the variable ball-bg. 1:06
Below that, I'll add a transform property. 1:14
And I'll use the translate function as the transform. 1:20
And like I did in an early video, I'll use calc and 1:25
variables to set the x and y translation values in pixels. 1:29
So first, I'll pass translate the calc function. 1:33
And inside this calc function, I'll pass it var. 1:37
And I'll specify the variable pos-x, or position-x. 1:40
And I'll multiply it by one pixel to set it in pixels. 1:47
Then I'll set the y value by adding a comma and another calc function. 1:52
Inside here I'll specify var. 1:58
And this time pass it, the variable position y. 2:01
And multiply it by one pixel. 2:06
And I'll set the ball-bg variable's fallback value to tomato. 2:10
So, tomato will be the ball's initial background color, when the page loads. 2:14
So now, instead of declaring the background color and 2:18
translation variables in my style sheet, I'll do it with JavaScript. 2:21
Over in scripts.js, 2:25
I'll update the values with JavaScript by first selecting the body element and 2:28
the element with the class ball using document.querySelector. 2:33
So, I'll first select the body with const 2:37
body = document.querySelector. 2:42
And here I'll specify the body selector. 2:46
Below that I'll target the class ball by creating a constant named ball. 2:51
And here, I'll specify the class ball. 3:03
So, we want the valleys to change when we click in the body. 3:05
So, I'll give body an Event.Listener with body.addEventListener 3:10
And here I'll set a background color and position value for 3:19
ball each time the body is clicked. 3:24
So I'll pass it, click event, and the event object followed by Function. 3:27
So inside the function, 3:34
I'll use the set property method on the style property to set each value. 3:36
So first, I'll set the X position with ball.style.setProperty. 3:41
I wanna set the value of the position x CSS variable. 3:52
So I'll pass set property, the position x variable, 3:57
and set the value to e.clientX. 4:04
So, I'm setting the value using the x and y coordinates of the page, e.clientx 4:08
will return the horizontal coordinate at which the click occured inside the body. 4:13
And e.clientY is going to provide the vertical coordinates. 4:19
So I'll copy this. 4:22
Paste it below and here I'll set the value of the position y variable to e.clientY. 4:26
And for this demo, I'll offset the coordinates by 80, 4:35
to make the translation values a little more precise. 4:38
That's going to place the center of the ball exactly where the mouse clicked. 4:42
And you'll see the cursor in the center, like here in the demo. 4:46
So, now to set a new background color each time the body is clicked. 4:52
We'll say, ball.style.setProperty. 4:57
Set the ball BGCCSS variable to a random hex value. 5:02
The randomHex function already provided here in the JavaScript. 5:09
So when body is clicked, this function returns a random 5:15
hex value that gets assigned to the wall bg css variable. 5:19
All right, let's have a look in the browser. 5:23
I get this to save. 5:25
Refresh and now if I click somewhere in the body, 5:28
we see the ball move to that exact spot and it's background color changes. 5:32
Good. 5:37
You'll find lots of amazing examples examples out there of CSS variables and 5:40
Java scripted action. 5:43
For example this Google Chrome example, updates the layouts spacing unites, 5:45
column and margin values live in the browser. 5:51
And when you click on one of the use this color links in the cards it, 5:55
changes the header background colors. 5:59
And if you scroll down, you'll see the CSS snippet, 6:05
displaying how they're using CSS variables page wise. 6:08
And below that, you can see how JavaScript is used to get and 6:12
set the custom property values. 6:15
And this demo by developer Wes Boss is also a great example of how CSS variables 6:20
can update with JavaScript. 6:24
The padding, spacing, blur, and 6:26
background color of the image update in real time when you adjust the sliders. 6:29
I've posted links to more demos in the teachers notes this video. 6:36

You need to sign up for Treehouse in order to download course files.

Sign up