style.setProperty 中的 var 不呈现

Question

我有一个进度条，它会根据用户输入的数字增加：

<div class="progressBarContainer percentBar"> 
    <div class="progressBarPercent" style="--width:${gPercent}"  id="${gName}-pbar"></div> 
</div>

我在样式中使用了一个变量来定义进度条的宽度

.progressBarPercent {
  background-color: var(--progressbar-main-color);
  width: calc(var(--width, 0) * 1%); <== THIS
  min-width: 10px;
  max-width: calc(100% - 1px);
  height: 17px;
  border-radius: 15px;
}

这是我尝试更新它的方式：

document.getElementById(gName+"-pbar").style.setProperty('--width', calculatedPercent);

如果我做一个日志，新的百分比在日志中正确显示，但是元素的属性没有被修改：

元素： The element image

日志： The log image

Answer 1

您发布的代码似乎工作正常，问题一定出在其他地方。

这是工作示例：

let progress = 0;

setInterval(() => {
  if (++progress > 100) progress = 0;
  document.getElementById("test").style.setProperty('--width', progress);
}, 100);

:root {
  --progressbar-main-color: crimson;
}

.progressBarContainer {
  width: 100%;
  background-color: darkgray;
}

.progressBarPercent {
  background-color: var(--progressbar-main-color);
  width: calc(var(--width, 0) * 1%);
  min-width: 10px;
  max-width: calc(100% - 1px);
  height: 17px;
  border-radius: 15px;
}

<div class="progressBarContainer percentBar">
  <div class="progressBarPercent" style="--width:0" id="test"></div>
</div>

style.setProperty 中的 var 不呈现

var in style.setProperty does not render

html

javascript

css

document