+ 3

How to change css variables with js?

2nd Jul 2018, 10:35 AM
Çůřîöş ßąšäñț 🇮🇳
Çůřîöş ßąšäñț 🇮🇳 - avatar
10 Antworten
+ 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
2nd Jul 2018, 1:23 PM
Roel
Roel - avatar
+ 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?
2nd Jul 2018, 11:03 AM
Roel
Roel - avatar
+ 1
try this document.getElementById("idname").style.background = "blue"; background can be replaced with whatever you want
2nd Jul 2018, 10:42 AM
Roel
Roel - avatar
+ 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.
2nd Jul 2018, 10:57 AM
Çůřîöş ßąšäñț 🇮🇳
Çůřîöş ßąšäñț 🇮🇳 - avatar
2nd Jul 2018, 11:18 AM
Roel
Roel - avatar
+ 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.
2nd Jul 2018, 12:34 PM
Çůřîöş ßąšäñț 🇮🇳
Çůřîöş ßąšäñț 🇮🇳 - avatar
0
<body> <p id=test> hello world! </p> <style> var element = document.getElementById("test"); element.style.color = " red"; </style> </body> hope this helps !!
10th Jul 2018, 3:54 AM
malaka tharumuthu
malaka tharumuthu - avatar
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
10th Jul 2018, 6:23 AM
Roel
Roel - avatar
0
Thanks Roel!
10th Jul 2018, 6:59 AM
Çůřîöş ßąšäñț 🇮🇳
Çůřîöş ßąšäñț 🇮🇳 - avatar
10th Jul 2018, 7:46 AM
Roel
Roel - avatar