是否可以使用js setProperty和另一个js变量的值来更改css变量？

Question

我有一个输入字段，在该字段中，用户应输入希望稍后显示的文本颜色。我想知道，是否有一种方法可以使用javascript setProperty函数更改css变量，而不是值，该参数将是另一个javascript变量？ 例如：

elem.style.setProperty('--my-css-variable', anotherJsVariable);

Answer 1

是的，就像您一样。

这是CSS自定义属性的重点。

setTimeout(function() {
  const elem = document.getElementById("one");
  const anotherJsVariable = "yellow";
  elem.style.setProperty('--my-custom-property', anotherJsVariable);
}, 750);

#one {
  --my-custom-property: red;
  background-color: var(--my-custom-property);
}

#two {
  background-color: white;
}

#three {
  background-color: var(--my-custom-property);
}

div {
  display: inline-block;
  padding: 1em;
}

<div id="one">
  <div id="two">
    <div id="three">

    </div>
  </div>
</div>