Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind CSS Variables and JavaScript?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
<___> // Get the root element3Order
Put the learning moves in the order that makes the concept easiest to apply.
CSS variables have access to the DOM, which means that you can change them with JavaScript.
CSS var() Function
Change Variables With JavaScript
Change Variables With JavaScript
CSS variables have access to the DOM, which means that you can change them with JavaScript.
Here is an example of how you can create a script to display and change the --primary-bg-color variable from the example used in the previous pages. For now, do not worry if you are not familiar with JavaScript. You can learn more about JavaScript in our JavaScript Tutorial :
Example
Formatted code
<script> // Get the root element
var r = document.querySelector(':root');
// Function for getting a variable value function myFunction_get() { // Get the styles (properties and values) for the root var rs = getComputedStyle(r); // Alert the value of the --primary-bg-color variable alert("The value of --primary-bg-color is: " + rs.getPropertyValue('--primary-bg-color'));
}
// Function for setting a variable value function myFunction_set() { // Set the value of variable --primary-bg-color to another value (in this case "green") r.style.setProperty('--primary-bg-color', 'green');
}
</script>Live preview
CSS var() Function
| Function | Description |
|---|---|
| var() | Inserts the value of a CSS variable |