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
![](https://videos.teamtreehouse.com/stills/TH-WS-CSSVariables-V7-stills-1.jpg?token=69950e73_7c3b4e455e2c689c9f6622e7ce00e5209b9c88ed)
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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