javascript - 用 jQuery 替换外部 CSS 中的自定义属性

Question

我需要按需替换 CSS 中的自定义属性之一。我为我的身体指定了多个背景，当用户单击特定按钮时，我想更改其中一些背景。例如，在开头的样式表看起来像这样：

: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) ;
}

但是一旦用户点击界面中的“value4”按钮，我想用“img/value4.png”替换“--value2”：

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

此代码仅将样式添加到根 HTML 但是我希望它替换现有自定义属性的值，这里是我想要得到的结果：

: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) ;
}

有人可以帮我弄这个吗？