当进度条值更改时，如何更改css渐变值

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

本文关键字：何更改 渐变 css      更新时间：2023-09-26

在我的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进度值取决于值是什么，因为我不知道我将如何使用webkit进度作为标记。

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

我做错了什么？

在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 */;
}
相关文章：