从Javascript更改Webkit进度值的颜色

对于学校项目，我需要制作一个进度条，根据特定值更改颜色。我知道可以使用

：-webkit进度值

和

：-webkit进度条

在css中指定进度条的颜色，但我需要知道如何在javascript中这样做，以便可以动态更改颜色

这是我尝试过的，但似乎不起作用

var progress=document.getElementById（'progress'）；
progress.style['-webkit进度值'].background='red'
您可以使用数据属性CSS选择器动态更新进度颜色

我在下面添加了多个进度条，它们在不同的时间完成


const run=（进度，onUpdate，ms=1000）=>{
进度=进度的类型==='string'？
文档查询选择器（进度）：进度；
const updateStep=progress=>{
常数
val=进度.value，
min=进度。min | | 0，
max=progress.max | | 100，
per=val/（最大-最小）；
如果（per>0.66）{progress.dataset.step=66；}
如果（per>0.33）{progress.dataset.step=33；}
else{progress.dataset.step=0；}
}
返回新承诺（res=>{
更新计划（进度）；
const task=setInterval（（）=>{
常数
min=进度。min | | 0，
max=progress.max | | 100，
val=进度。价值；
const newVal=onUpdate（val、min、max）；
progress.value=newVal；
更新计划（进度）；
如果（newVal>=max）{
清除间隔（任务）；
res（进度）；
}否则{
progress.value=newVal；
}
}，ms）；
});
}
常量更新=（val，min，max）=>Math.round（val+（（max-min）/10））；
const done=ref=>console.log（`Progress（id=${ref.id}）finished！`）；
运行（“#进度-1”，更新）。然后（完成）；
运行（“#进度-2”，更新）。然后（完成）；
运行（“#进度-3”，更新）。然后（完成）
：根目录{
--背景：#111；
--进展背景：#222；
--进度边界：#333；
--progress-step-0:#F00；
--进度步骤33:#FF0；
--progress-step-66:#0F0；
}
身体{
背景：var（--背景）；
显示：网格；
网格行间距：0.5em；
}
进度{
-webkit外观：无；
}
进度。颜色进度：：-webkit进度值{
背景色：#AAA；
边界半径：0.25em；
}
进度。颜色进度：：-webkit进度条{
背景颜色：var（--进度背景）；
边框：薄实体变量（--进度边框）；
边界半径：0.25em；
}
进度。颜色进度[数据步骤=“0”]：：-webkit进度值{
背景色：var（--progress-step-0）；
边界半径：0.25em；
}
进度。颜色进度[数据步骤=“33”]：：-webkit进度值{
背景色：var（--progress-step-33）；
边界半径：0.25em；
}
进度。颜色进度[数据步骤=“66”]：：-webkit进度值{
背景色：var（--progress-step-66）；
边界半径：0.25em；
}
什么颜色，以什么百分比？进度条是如何更改的？