javascript - 当我的进度条值发生变化时，如何更改 css 渐变值？

Question

在我的 CSS 文件中，我有以下代码(适用于 Google Chrome)用渐变效果设置进度条的样式。

progress[value] {
    width: 100%; height: 40px;
    margin: 0 0 3em;
    border: 4px solid #000000;
}

progress::-webkit-progress-value {
    background-image:

    -webkit-linear-gradient(-45deg,
                           transparent 33%, rgba(0, 0, 0, .1) 44%,
                           rgba(0,0, 0, .1) 66%, transparent 66%),
    -webkit-linear-gradient(top,
                           rgba(255, 255, 255, .25),
                           rgba(0, 0, 0, .25)),
    -webkit-linear-gradient(right, #04d647, #009999);
}

但是我的 JavaScript 代码导致我的进度条不断改变值。现在渐变颜色设置为绿色渐变，但我想根据值的高低更改颜色(即小于 30% = 红色渐变，小于 65% 但大于 30% = 黄色渐变，超过 65% = 绿色渐变)。

我的 HTML 文件中有这段 JavaScript 代码，但我不知道如何根据值来更改进行中的颜色::-webkit-progress-value，因为我不知道如何使用 webkit-progress 作为标签。

if (progressbar1.value >= .30) {

   $("progress::-webkit-progress-value").css("background-color", "#424242");
   // something like this^^....what tags/scripts go here??

}   

我做错了什么？

Answer 1

将数据属性添加到您的 progress 标签，它将保存您想要更改渐变的值:

<progress data-value="0">

然后，在您的 JavaScript 中，检查进度条的值，如果它超过了您想要更改渐变的值，则更新数据属性:

if(progressbar1.value>=65)
    progressbar1.dataset.value=65
else if(progressbar1.value>=30)
    progressbar1.dataset.value=30
else
    progressbar1.dataset.value=0

最后，在您的 CSS 中，使用属性选择器为 data-value 属性的每个值设置规则，更改渐变和/或您想要的任何其他样式:

progress[data-value="0"]::-webkit-progress-value{
    background-image:/* red gradient here */;
}
progress[data-value="30"]::-webkit-progress-value{
    background-image:/* yellow gradient here */;
}
progress[data-value="65"]::-webkit-progress-value{
    background-image:/* green gradient here */;
}