+ 3
How to change css variables with js?
10 Answers
+ 1
I made a little bit of code about the css var() function and how to change it in javascript
https://code.sololearn.com/W0nQd7h00P3Q/?ref=app
+ 2
Çůřîöş ßąšäñț 🇮🇳 var() function?
something like this?
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
and your question was how to change the mains in javascript?
+ 1
try this
document.getElementById("idname").style.background = "blue";
background can be replaced with whatever you want
+ 1
Roel
But that's not my question, your code updates the background style, but I want to update the css variables which are accessible using var() function.
+ 1
try this link https://medium.com/@_bengarrison/accessing-and-modifying-css-variables-with-javascript-2ccb735bbff0
it might help you futher on
+ 1
Thanks Roel , but I'm beginner in web development. Could you please provide me the code you have written above which completely fulfill my demands!
.
I just want to completely change the value of --mains with js.
0
<body>
<p id=test> hello world! </p>
<style>
var element = document.getElementById("test");
element.style.color = " red";
</style>
</body>
hope this helps !!
0
malaka tharumuthu I thought he ment that too, but he ment to change variables in css like this
-html-
<p id="hello">hello world</p>
-css-
:root{
--variable:red;
}
#hello{
color:var(--variable);
}
he wants to change the --variable here just like in this code
https://code.sololearn.com/W0nQd7h00P3Q/?ref=app
0
Thanks Roel!
0
you're welcome Çůřîöş ßąšäñț 🇮🇳
Often have questions like this?
Learn more efficiently, for free:
Hot today
Ejercicio Pytho
0 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
Please rate my code from 1 to 10
2 Votes
How to start
0 Votes
Recursion doubt
2 Votes