是否可以使用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>