文章/答案/技术大牛

发布

社区首页 >问答首页 >如何更改“progress[value]：：-webkit-progress value”属性的颜色？

问如何更改“progress[value]：：-webkit-progress value”属性的颜色？
EN

Stack Overflow用户

提问于 2019-06-03 05:55:24

回答 2查看 2.2K关注 0票数 3

如何更改

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在这里输入图像描述将是什么？

<output>标记用于显示"%“。

javascript

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-03 10:57:51

我将使用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>

Stack Overflow用户

发布于 2019-06-03 07:50:51

请核对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>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56421795

复制

相似问题

问如何更改“progress[value]：：-webkit-progress value”属性的颜色？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改“progress[value]：：-webkit-progress value”属性的颜色？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改“progress[value]：：-webkit-progress value”属性的颜色？
EN