在我的 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??
}
我做错了什么?
最佳答案
将数据属性添加到您的 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 */;
}
关于javascript - 当我的进度条值发生变化时,如何更改 css 渐变值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34092182/