是否可以使用带有另一个 js 变量值的 js setProperty 更改 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>

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

Is it possible to change a css variable using js setProperty with a value of another js variable?

javascript

input

css-variables

setpropertyactionlistener