CSS variables are custom properties that can be declared and used in your stylesheets. A good way to use them is when it comes to the colors, fonts, layouts, or other aspects of your design that you want to keep consistent and easy to modify.
/* Define color variables in root */
:root {
--primary-color: #1e90ff;
--secondary-color: #ffffff;
}
/* Use color variables in other selectors */
body {
background-color: var(--primary-color);
}
h1 {
color: var(--secondary-color);
}A common best practice is to define custom properties on the :root pseudo-class, which matches the document’s root element (usually the <html> element). CSS variables in root have a global scope, which means they can be accessed and used throughout the document.
Please note that CSS variables are scoped, meaning they are affected by the CSS rules that apply to the element where they are defined. To access a CSS variable from JavaScript, make sure it is defined on an element that is accessible to your JavaScript code.
To get the value of a CSS variable with JavaScript, you can use the getComputedStyle() function. This function returns an object that contains the computed values of all CSS properties applied to an element. To get the value of the given CSS variable, you can then call the getPropertyValue() method on the returned object, passing the name of the variable as a string.
/* style.css */
:root {
--color-font-general: #000000;
}// index.js
// Get the root element
var root = document.documentElement;
// Get the computed styles of the root element
var style = getComputedStyle(root);
// Get the value of the --color-font-general variable
var color = style.getPropertyValue('--color-font-general');
// Log the value to the console
console.log(color); // #336699To set the value of a CSS variable with JavaScript, you can use the setProperty() method on the element’s style property. The setProperty() method takes two parameters, the name of the CSS variable and its value, both as strings, and applies them to the given element.
/* style.css */
:root {
--color-font-general: #000000;
}// index.js
// Get the root element
var root = document.documentElement;
// Set the value of the --color-font-general variable to #000000
root.style.setProperty('--color-font-general', '#000000');To get and set CSS variables in non-root elements from JavaScript, you can use the same methods as for root elements, but you need to specify the element that has the CSS variable declared.
getComputedStyle() and setProperty() methods.