javascript - Dynamically change the color of jQuery Progress Bar - Stack Overflow

admin管理员组

文章数量:1278985

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.

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.

• javascript
• jquery

Share Improve this question Follow asked May 16, 2011 at 4:06 kerkeslagerkerkeslager 1,39644 gold badges1717 silver badges3636 bronze badges 4

• Can't you add color when you change value of progressbar? i.e. $( ".selector" ).progressbar({ value: 37 }).css('color', 'green'); – enoyhs Commented May 16, 2011 at 4:14
• Just tried that. It doesn't work. Thanks for the suggestion, though! – kerkeslager Commented May 16, 2011 at 4:22
• Just realized that this actually initializes progress bar. You can try: $( ".selector" ).progressbar( "option", "value", 37 ).css('color', 'green');. And if it doesn't work, add css before .progressbar(..) (Though I don't think that would make any difference) – enoyhs Commented May 16, 2011 at 4:26
• 1 Alright, using your help I finally found the Google search terms to get the info I wanted. Apparently it works by setting the background color in an inner div, so instead of $('#progressbar').css('color','red'); you have to use $('#progressbar > div').css('background','red');. Thanks for your help; I couldn't have found the answer without you! – kerkeslager Commented May 16, 2011 at 4:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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:

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

Working example.

本文标签： javascriptDynamically change the color of jQuery Progress BarStack Overflow