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

如果我的进度条值发生变化，如何更改css渐变值？

1 个答案: