Javascript style.setProperty中的变量不呈现

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

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

如果我创建日志，新百分比将正确显示在日志中，但元素的属性不会修改：

要素：

日志：

---

您发布的代码似乎工作正常，问题一定是其他原因

以下是工作示例：

let progress=0；
设置间隔（（）=>{
如果（++进度>100）进度=0；
document.getElementById（“test”）.style.setProperty（'--width'，progress）；
}, 100);
：根目录{
--progressbar主色：深红色；
}
.progressBarContainer{
宽度：100%；
背景色：暗灰色；
}
.百分之{
背景色：var（--progressbar主色）；
宽度：计算值（var（--宽度，0）*1%）；
最小宽度：10px；
最大宽度：计算（100%-1px）；
高度：17px；
边界半径：15px；
}

请避免粘贴屏幕截图，而是粘贴代码-特别是对于thoseI尝试过且工作正常的短代码。
.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);