javascript - 如何根据元素的宽度改变背景颜色？

Question

我正在尝试制作一个进度条。 HTML 如下:

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

我想根据它的宽度绘制 DIV 的背景。比如小于100(返回值以px为单位)，我要给它涂上红色。

我尝试了以下方法:

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

Here is the demo on JSFiddle.

但它不是画它。

我不习惯使用 javascript 和 jquery，所以我认为这可能是语法错误或我看不到的东西。任何人都可以帮助我如何让它工作吗？

提前致谢。

Answer 1

您的代码没问题。唯一的事情是指定 height

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

你应该看起来很像

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

Fiddle