0

I need to replace one of the custom properties in CSS on demand. I specify multiple background for my body and when the user clicks specific buttons I'd like to change some of those backgrounds. For example at the beginning stylesheet looks like that:

:root {
  --value1: url("img/value1.png");
  --value2: url("img/value2.png");
  --value3: url("img/value3.jpg");
}

.background {
  background-image: var(--value1), var(--value2), var(-value3) ;
}

But once user clicks 'value4' button in the interface I'd like to replace '--value2' with 'img/value4.png':

function setCustomValue() {
  $(":root").css('--value2', 'img/value4.png');
}

This code only adds style to the root HTML however I'd like it to replace value of the existing custom property, here the result I'd like to get:

:root {
   --value1: url("img/value1.png");
   --value2: url("img/value4.png");
   --value3: url("img/value3.jpg");
}
    
.background {
  background-image: var(--value1), var(--value2), var(-value3) ;
}

Can someone help me with this?

basilique
  • 173
  • 2
  • 9
  • Maybe this article can help [link](https://stackoverflow.com/questions/566203/changing-css-values-with-javascript) – Sina Riani Nov 18 '20 at 12:34
  • *This code only adds style to the root HTML*. That is how you should do it. Modify the inline styles or adding / removing classes, but you shouldn't rewrite your stylesheets. That being said, if you still want to then the link provided by @SinaRiani shows the answer. – Emiel Zuurbier Nov 18 '20 at 12:37

0 Answers0