Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Get and Set CSS Variables with JavaScript
To get and set the variables with JavaScript, we can use various methods. The getComputedStyle() method gives an object which includes all the styles applied to the target element. The getPropertyValue() method is used to obtain the desired property from the computed styles. The setProperty() is used to change the value of CSS variable.
The following example illustrate how we can get and set CSS variables using JavaScript. First, we have called the two custom methods −
<div onmouseover="showColor()" onmouseout="changeColor()">
The showColor() method use the getPropertyValue() method to get the property −
function showColor() {
let cs = getComputedStyle(ele);
para.textContent = ("Previously " + cs.getPropertyValue('--innerColor') + " color");
}
The changeColor() method use the setProperty() to set the value −
function changeColor() {
let item = document.querySelector('div');
item.style.setProperty('--innerColor', 'magenta')
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--outerColor: magenta;
--innerColor: lightgreen;
text-align: center;
}
div {
margin: 5%;
padding: 10%;
background-color: var(--innerColor);
border: 2px groove var(--outerColor);
}
</style>
</head>
<body>
<div onmouseover="showColor()" onmouseout="changeColor()">
<p></p>
</div>
</body>
<script>
let ele = document.querySelector(':root');
let para = document.querySelector('p');
function showColor() {
let cs = getComputedStyle(ele);
para.textContent = ("Previously " + cs.getPropertyValue('--innerColor') + " color");
}
function changeColor() {
let item = document.querySelector('div');
item.style.setProperty('--innerColor', 'magenta')
}
</script>
</html>
Another example illustrate how we can get and set CSS variables using JavaScript. First, we have called a custom method on mouseover −
<div onmouseover="toggle()"></div>
We have set the property to change the color to blue using the setProperty() −
let ele = document.querySelector(':root');
function toggle() {
let cs = getComputedStyle(ele);
let item = document.querySelector('div');
if(cs.getPropertyValue('--customColor') !== 'blue') {
item.style.setProperty('--customColor', 'blue')
}
}
Above, we have also checked that the current color is blue or not using the getPropertyValue() −
if(cs.getPropertyValue('--customColor') !== 'blue') {
item.style.setProperty('--customColor', 'blue')
}
Example
Let us see an example −
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--customColor: seagreen;
}
div {
margin: 5%;
width: 130px;
height: 130px;
box-shadow: inset 0 0 38px var(--customColor);
border-radius: 50%;
}
</style>
</head>
<body>
<div onmouseover="toggle()"></div>
</body>
<script>
let ele = document.querySelector(':root');
function toggle() {
let cs = getComputedStyle(ele);
let item = document.querySelector('div');
if(cs.getPropertyValue('--customColor') !== 'blue') {
item.style.setProperty('--customColor', 'blue')
}
}
</script>
</html>
10K+ Views
