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

【问题标题】：How to change the progress bar colors based on the value如何根据值更改进度条颜色
【发布时间】：2014-02-10 20:27:10
【问题描述】：

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

以前我使用 html5 米标签。在对它进行了一些研究之后，可以确定这个元素在 IE10/11（不可见）中将不被支持。我使用进度条而不是仪表标签，这在所有浏览器中都是可见的，这意味着它也支持 IE，但这里还有一个错误，比如这种颜色会发生变化。前任。在 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>

【问题讨论】：

请更新问题而不是添加 cmets。
你从哪里获得价值？
每个浏览器处理这个有点不同。请阅读hongkiat.com/blog/html5-progress-bar上的有趣文章您需要添加自己的样式以根据所使用的浏览器强制使用相同的样式。
你能提供一个Fiddle吗？

标签： jquery html asp.net-mvc-4

【解决方案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/

【讨论】：