Javascript 如何根据条件更改进度条的颜色

我在根据条件更改或更新

-webkit progress value

中的背景色时遇到问题。 我正在尝试使用：

document.querySelectorAll（'progress:：-webkit progress value'）.style.setProperty（'background'，'blue'）

使用jquery：

$（'progress:：-webkit progress value'）.css（'background'，'blue'）

但是进度条的颜色仍然是默认颜色（灰色）

是否有任何解决方案可根据以下条件更新颜色

铜牌：男孩（橙红色）和女孩（紫色）
银色：男孩（黄色）和女孩（绿色）
金色：男孩（红色）和女孩（蓝色）

函数检查（）{
var classTrophy=“黄金”；
if（类别奖杯=“铜牌”）{
控制台日志（“青铜”）；
document.getElementById（“男孩”）.style.background=“橙色”；
document.getElementById（“女孩”）.style.background=“紫色”；
}否则如果（类别奖杯=“银牌”）{
控制台日志（“银色”）；
document.getElementById（“男孩”）.style.background=“黄色”；
document.getElementById（“girl”）.style.background=“绿色”；
}else if（类别奖杯=“金牌”）{
控制台日志（“黄金”）；
document.getElementById（“男孩”）.style.background=“红色”；
document.getElementById（“女孩”）.style.background=“蓝色”；
}
}
进展{
宽度：100%；
-webkit外观：无；
左边距：8px；
高度：8px；
}
进度：：-webkit进度值{
-webkit外观：无；
背景：灰色；
空白：预处理；
边界半径：2px；
盒影：0 2px 5px rgba（249，255，249，0.78）插入；
}
进度：：-webkit进度条{
-webkit外观：无；
空白：预处理；
背景：#ffffff；
边界半径：2px；
盒影：0 2px 5px rgba（0,0,0,0.34）插页；
}

男孩



姑娘
试试这个


函数检查（）{
var classTrophy=“黄金”；
if（类别奖杯=“铜牌”）{
控制台日志（“青铜”）；
document.getElementById（“男孩”）.style.background=“橙色”；
document.getElementById（“女孩”）.style.background=“紫色”；
}否则如果（类别奖杯=“银牌”）{
控制台日志（“银色”）；
document.getElementById（“boy”）.classList.add（“进度黄”）；
document.getElementById（“girl”）.classList.add（“绿色进度”）；
}else if（类别奖杯=“金牌”）{
控制台日志（“黄金”）；
document.getElementById（“boy”）.classList.add（“红色进度”）；
document.getElementById（“girl”）.classList.add（“蓝色进度”）；
}
}
进展{
宽度：100%；
-webkit外观：无；
左边距：8px；
高度：8px；
}
进度：：-webkit进度值{
-webkit外观：无；
背景：灰色；
空白：预处理；
边界半径：2px；
盒影：0 2px 5px rgba（249，255，249，0.78）插入；
}
进度：：-webkit进度条{
-webkit外观：无；
空白：预处理；
背景：#ffffff；
边界半径：2px；
盒影：0 2px 5px rgba（0,0,0,0.34）插页；
}
.进度黄色：：-webkit进度条{
背景：黄色；
}
.progress红色：：-webkit进度条{
背景：红色；
}
.progress蓝色：：-webkit进度条{
背景：蓝色；
}
.progress绿色：：-webkit进度条{
背景：绿色；
}

男孩



姑娘
试试这个


函数检查（）{
var classTrophy=“黄金”；
if（类别奖杯=“铜牌”）{
控制台日志（“青铜”）；
document.getElementById（“男孩”）.style.background=“橙色”；
document.getElementById（“女孩”）.style.background=“紫色”；
}否则如果（类别奖杯=“银牌”）{
控制台日志（“银色”）；
document.getElementById（“boy”）.classList.add（“进度黄”）；
document.getElementById（“girl”）.classList.add（“绿色进度”）；
}else if（类别奖杯=“金牌”）{
控制台日志（“黄金”）；
document.getElementById（“boy”）.classList.add（“红色进度”）；
document.getElementById（“girl”）.classList.add（“蓝色进度”）；
}
}
进展{
宽度：100%；
-webkit外观：无；
左边距：8px；
高度：8px；
}
进度：：-webkit进度值{
-webkit外观：无；
背景：灰色；
空白：预处理；
边界半径：2px；
盒影：0 2px 5px rgba（249，255，249，0.78）插入；
}
进度：：-webkit进度条{
-webkit外观：无；
空白：预处理；
背景：#ffffff；
边界半径：2px；
盒影：0 2px 5px rgba（0,0,0,0.34）插页；
}
.进度黄色：：-webkit进度条{
背景：黄色；
}
.progress红色：：-webkit进度条{
背景：红色；
}
.progress蓝色：：-webkit进度条{
背景：蓝色；
}
.progress绿色：：-webkit进度条{
背景：绿色；
}

男孩



姑娘
记住您需要为firefox添加
-moz进度条/值
，记住您需要为firefox添加
-moz进度条/值