动态更改jQuery Progress Bar的颜色

我有一个动态的JQuery进度条我想要主题（ 这里是文档）：它将以红色开始，然后随着它的进展变为黄色，最后变为绿色。 看起来这只是设置样式颜色属性的问题，但我似乎无法找到适当的属性。

Answer 1

jQuery UI进度条没有明确设置的颜色; 相反，它从您的UI主题inheritance“小部件标题”背景图像。 那么，更改颜色的最简单方法是设置覆盖背景的样式。 例如：

 .ui-progressbar.beginning .ui-progressbar-value { background: red; } .ui-progressbar.middle .ui-progressbar-value { background: yellow; } .ui-progressbar.end .ui-progressbar-value { background: green; } 

（或者，您可以使用不同的背景图像。）然后，您只需在设置其值时更改进度条上的类：

 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"); } 

工作实例。