Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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 CSS 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() method is used to change the value of CSS variable.
In this article we are having a div and a button, our task is to get and set CSS variables with JavaScript. By getting and setting the CSS variable, we will change the background color of div upon clicking the button.
Steps to Get and Set CSS Variables with JavaScript
- We have used a div and button tag to create a button and wrapped it inside div container.
- We have used container class to set height, background-color and center the button using justify-content and align-items property. The display property makes the div container a flexbox.
- We have used :root pseudo-class selector to declare variables in CSS globally. We have declared --custom-bg-color variable globally.
- We have used getPropertyValue('--custom-bg-color') to get the current color value of the variable custom-bg-color to determine background color and stored it in currColor.
- Then we have used if-else conditional statement to set the background-color of div.
- If currColor is not black then we have used setProperty method to set the value of variable --custom-bg-color to black. It sets the background color to black upon clicking.
Example
Here is an example implementing above mentioned steps to get and set CSS variables with JavaScript to change the background color of the div upon clicking on the button.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
:root {
--custom-bg-color: rgb(138, 21, 21);
}
.container {
display: flex;
justify-content: center;
height: 200px;
align-items: center;
background-color: var(--custom-bg-color);
}
button {
padding: 15px;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<button onclick="toggle()">
Change Theme
</button>
</div>
<script>
function toggle() {
let root = document.documentElement;
let currColor = getComputedStyle(root)
.getPropertyValue('--custom-bg-color');
if (currColor === 'rgb(138, 21, 21)') {
root.style.setProperty('--custom-bg-color', 'black');
} else {
root.style.setProperty('--custom-bg-color',
'rgb(138, 21, 21)');
}
}
</script>
</body>
</html>
Conclusion
In this article to get and set CSS variables with JavaScript, we have used getComputedStyle(), getPropertyValue() and setProperty() method. We have used an example of changing background-color upon clicking the button. We used getPropertyValue() to get the color value and setProperty() to set a new background-color of div.
13K+ Views
