如何根据值更改进度条颜色

Question

我在这里使用html5进度条我想根据值为进度条实现不同的颜色 如果值> 80％，则进度条颜色应为红色 如果这个颜色应该是绿色的，我实现了jQuery函数，但它不适合我

以前我用的是html5米标签。在对它进行了一些研究之后，确定这个元素在IE10 / 11（不可见）中不会得到支持。 我使用Progress Bar代替米标签，这在所有浏览器中都可见，这意味着它也支持IE，但是这里还有一个像这种颜色变化的bug。 防爆。在IE背景中，Firefox的颜色为“蓝色”，“绿色”为“绿色”，而Chrome则颜色为“不同”。 在开发的角度来看，我们提供了一些背景颜色，但它在不同的浏览器中显示各种颜色。

<script type="text/javascript">
    $(document).ready(function () { 
        var item = $('#progress_bar').val();
        if (item != null) {
            if (value) >= 900) { $('#progress_bar').css({background:'red'}); }
            else {$('#progress_bar').css({ background:'green'});}}
        }
     );
</script>

Answer 1

请查看此示例：DEMO

您必须使用伪类选择器并在其中设置颜色。 请注意IE使用颜色，chrome / firefox使用背景颜色。

包含2个值的CSS代码示例，例如progress = 10和progress = 20：

progress{
  /* Reset the default appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of default border in Firefox. */
  border: none;

  /* Dimensions */
  width: 250px;
  height: 20px;    
}

.progress-10 {
  color: green; 
}

.progress-10::-webkit-progress-value {
  background-color:green;
}

.progress-10::-moz-progress-bar {
  background-color:green;
}

.progress-20 {
  color: red; 
}

.progress-20::-webkit-progress-value {
  background-color:red;
}

.progress-20::-moz-progress-bar {
  background-color:red;
}

我使用的部分风格来自http://css-tricks.com/html5-progress-element/