How to change the background color by the width of element?

Question

I'm trying to make a progress bar. The HTML is the following:

<div class="progress-bar" style="width:5%"></div>

I want to paint the DIV's background according to the width of it. For example, if it is lower than 100 (the value returned is in px), I want it to be painted with red.

I've tryed the following:

var currentWidth = $('.progress-bar').width();
if (currentWidth < 100) {
    $('.progress-bar').css('background-color','red');
}

Here is the demo on JSFiddle.

But it is not painting it.

I'm not used to use javascript and jquery, so I believe it could be a syntax error or something I can't see. Can anyone help me how to make it work please?

Thanks in advance.

Answer 1

Since you're using inline styles you can use the style property of the div to get the width in %

var currentWidth = $('.progress-bar')[0].style.width;
if (parseFloat(currentWidth, 10) < 100) {
    $('.progress-bar').css('background-color','red');
}

---

For multiple

$('.progress-bar').each(function(){
    var currentWidth = this.style.width;
    if (parseFloat(currentWidth, 10) < 11) {
        $(this).css('background-color','red');
    }
});