如何改变
的颜色progress[value]::-webkit-progress-value {
background-color: #00bdf8;
}
用户选择的不同值 当用户选择 30% 时,颜色应该是红色,在 60% 时,它将是黄色,然后是绿色
<input type="range" max="100" step="1" class="inputseekbar" id="range">
<progress max="100" id="progressbarcolor"></progress>
<output for="range" class="output"></output>
什么是 JS 或 Jquery enter image description here
<output>
标签用于显示“%”。
最佳答案
我会使用 CSS 变量并根据进度值使用 JS 调整值。
这是一个基本的例子:
var progress = document.querySelectorAll("progress");
for(var i = 0;i<progress.length;i++) {
var n = 2 * parseInt(progress[i].getAttribute("value"));
progress[i].style.setProperty("--c", "rgb("+n+","+n+",20)");
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
}
progress::-webkit-progress-bar {
background:grey;
}
progress::-webkit-progress-value {
background-color: var(--c,red);
}
<progress max="100" value="20"></progress>
<progress max="100" value="50"></progress>
<progress max="100" value="60"></progress>
<progress max="100" value="100"></progress>
您也可以轻松地在更改时执行此操作:
var progress = document.querySelector("progress");
document.querySelector("input").addEventListener('input', function (evt) {
progress.setAttribute('value',this.value);
progress.style.setProperty("--c", "rgb("+2*this.value+","+2*this.value+",20)");
});
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
}
progress::-webkit-progress-bar {
background:grey;
}
progress::-webkit-progress-value {
background-color: var(--c,red);
}
<input type="range" max="100" step="1" class="inputseekbar" id="range">
<progress max="100" value="50"></progress>
相关:
How to update placeholder color using Javascript?
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
关于javascript - 如何更改 "progress[value]::-webkit-progress-value"属性的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56421795/