Javascript 如何更改“的颜色”；进度[价值]：-webkit进度价值“；财产？_Javascript_Jquery_Html_Css

Javascript 如何更改“的颜色”；进度[价值]：-webkit进度价值“；财产？

javascript jquery html css

Javascript 如何更改“的颜色”；进度[价值]：-webkit进度价值“；财产？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如何改变颜色 progress[value]::-webkit-progress-value { background-color: #00bdf8; } 用户选择的不同值当用户选择30%时，颜色应为红色，在60%时，颜色将为黄色，然后为绿色 <input type="range" max="100" step="1" class="inputseekbar" id="range"> <progress max="1

如何改变颜色

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将是什么

标记用于显示“%”

请检查30%的值

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>


progress {
  color: red;
  background: green
}

progress::-webkit-progress-value {
  background: red;
}

progress::-moz-progress-bar {
  background: green;
}

</style>
</head>
<body>
<input type="range" max="100" step="1" class="inputseekbar" id="range">
 <progress max="100" value="30" id="progressbarcolor"></progress>
 <output for="range" class="output"></output>

</body>
</html>


页面标题
进展{
颜色：红色；
背景：绿色
}
进度：：-webkit进度值{
背景：红色；
}
进度：：-moz进度条{
背景：绿色；
}

我会使用CSS变量，并根据进度值使用JS调整值

以下是一个基本示例：

var progress=document.querySelectorAll（“progress”）；
对于（var i=0；iMy问题不同。您已在HTML进度标记中定义了硬编码值。但我希望当用户将进度条拖动到30%时，颜色应更改。