javascript 动态改变 jQuery 进度条的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6013067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically change the color of jQuery Progress Bar
提问by kerkeslager
I have a JQuery progress bar I want to theme (documentation here) dynamically: it will start out red, then as it progresses turn yellow, and finally turn green. It seems like this would just be a matter of setting a style color attribute, but I can't seem to find what the appropriate attribute is.
我有一个 JQuery 进度条，我想动态地设置主题（此处的文档）：它会从红色开始，然后随着进度变成黄色，最后变成绿色。看起来这只是设置样式颜色属性的问题，但我似乎无法找到合适的属性。
回答by Ben Blank
The jQuery UI progress bar doesn't have an explicitly set color; instead, it inherits the "widget header" background image from your UI theme. The simplest way to change the color, then, is to set up styles which override the background. For example:
jQuery UI 进度条没有明确设置的颜色；相反，它从您的 UI 主题继承了“小部件标题”背景图像。更改颜色的最简单方法是设置覆盖背景的样式。例如：
.ui-progressbar.beginning .ui-progressbar-value { background: red; }
.ui-progressbar.middle .ui-progressbar-value { background: yellow; }
.ui-progressbar.end .ui-progressbar-value { background: green; }
(Alternatively, you could use different background images.) Then, you simply change the class on the progress bar when setting its value:
（或者，您可以使用不同的背景图像。）然后，您只需在设置其值时更改进度条上的类：
function updateProgressbar(current, target) {
var value = parseInt(current / target * 100);
$progressbar
.progressbar("value", value)
.removeClass("beginning middle end")
.addClass(value < 40 ? "beginning" : value < 80 ? "middle" : "end");
}
