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

Question

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

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

Answer 1

是的，就像你一样。这样做是CSS自定义属性的重点。setTimeout(function() {&nbsp; const elem = document.getElementById("one");&nbsp; const anotherJsVariable = "yellow";&nbsp; elem.style.setProperty('--my-custom-property', anotherJsVariable);}, 750);#one {&nbsp; --my-custom-property: red;&nbsp; background-color: var(--my-custom-property);}#two {&nbsp; background-color: white;}#three {&nbsp; background-color: var(--my-custom-property);}div {&nbsp; display: inline-block;&nbsp; padding: 1em;}<div id="one">&nbsp; <div id="two">&nbsp; &nbsp; <div id="three">&nbsp; &nbsp; </div>&nbsp; </div></div>