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
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.
Resources
- Values in JavaScript – MDN
setProperty()
– MDNgetPropertyValue()
– MDN- CSS Custom Properties—Dynamic Changes With And Without Javascript
Related JavaScript Courses
CSS Variables with JavaScript Demos
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up