Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

Variables and JavaScript

CSS variables can be manipulated via JavaScript since they have access to the Document Object Model (DOM).

Below is an example illustrating how you can develop a script to showcase and modify the –blue variable introduced in the preceding pages. If you’re not yet familiar with JavaScript, don’t worry; you can explore more about JavaScript in our JavaScript Tutorial.

Example

// Create a 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 –blue variable
alert(“The value of –blue is: “ + rs.getPropertyValue(‘–blue’));
}

// Create a function for setting a variable value
function myFunction_set() {
// Set the value of variable –blue to another value (in this case “lightblue”)
r.style.setProperty(‘–blue’, ‘lightblue’);
}
</script>

Browser Support

The numbers in the table indicate the initial browser version that provides comprehensive support for the var() function.