如何在我的进度条值更改时更改 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 取决于 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 属性的每个值设置规则，更改渐变 and/or 任何您想要的其他样式：

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 */;
}

如何在我的进度条值更改时更改 css 渐变值？

How do I change the css gradient values when my progress bar value changes?

html

javascript

css

progress

progress-bar