Javascript 如何根据元素的宽度更改背景色？

我正在努力做一个进度条。HTML如下所示：

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

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

我想根据DIV的宽度绘制它的背景。 例如，如果它小于100（返回的值以px为单位），我希望它被涂成红色

我尝试了以下几点：

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

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

var currentWidth=$（'.progress bar'）.width（）；
如果（当前宽度<100）{
$（'.progress bar'）.css（'background-color'，'red'）；
}

但它不是在画它

我不习惯使用javascript和jquery，所以我相信这可能是语法错误或我看不到的东西。有人能帮我怎么做吗

---

提前感谢。

您的代码正在运行。您可能需要将代码放入

文档中。准备就绪

，并在div中放入一些文本以查看结果。还要确保您成功地嵌入了jQuery

Html

123

Javascript

$（文档）.ready（函数（）{
var currentWidth=$（'.progress bar'）.width（）；
如果（当前宽度<100）{
$（'.progress bar'）.css（'background-color'，'red'）；
}
});

由于您使用的是内联样式，因此可以使用div的style属性来获取宽度，单位为%

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

var currentWidth=$（'.progress bar'）[0].style.width；
如果（parseFloat（currentWidth，10）<100）{
$（'.progress bar'）.css（'background-color'，'red'）；
}

---

多次

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

$（'.progress bar'）。每个（函数（）{
var currentWidth=this.style.width；
if（parseFloat（currentWidth，10）<11）{
$（this.css（'background-color'，'red'）；
}
});

您的代码很好。唯一的事情是指定高度

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

$（函数（）{
var currentWidth=$（'.progress bar'）.width（）；
console.log（当前宽度）；
如果（当前宽度<100）{
$（'.progress bar'）.css（'background-color'，'red'）；
}
});

这是一个“手动”进度条，您可以通过单击按钮来增加进度条，查看它在增长时如何改变颜色和大小。只需移除按钮，并将其放入循环中，即可自动执行相同的操作

HTML

<div class="progress-bar"></div>
<input type="button" id="increase" value="Increase" />

jQuery

$(document).on("click", "#increase", function () {
    var currentWidth = $('.progress-bar').width();
    currentWidth += 5;
    $('.progress-bar').css('width', currentWidth + 'px');
    if (currentWidth < 100) {
        $('.progress-bar').css('background-color', 'red');
    } else if (currentWidth < 200) {
        $('.progress-bar').css('background-color', 'yellow');
    } else {
        $('.progress-bar').css('background-color', 'green');
    }
});

$（文档）。在（“单击”，“增加”，函数（）{
var currentWidth=$（'.progress bar'）.width（）；
电流宽度+=5；
$（'.progress bar'）.css（'width'，currentWidth+'px'）；
如果（当前宽度<100）{
$（'.progress bar'）.css（'background-color'，'red'）；
}否则如果（当前宽度<200）{
$（'.progress bar'）.css（'background-color'，'yellow'）；
}否则{
$（'.progress bar'）.css（'background-color'，'green'）；
}
});

只要代码在文档内部或DOM中的元素之后，它看起来就很好，但这究竟应该在什么时候发生，仅在pageload上，还是在某些事件或？你需要设定一个高度。否则它就不会在我看来很好：你有没有给它一个高度，或者在其中添加任何内容，让它显示出来。你是在渲染前调用它吗？对我来说很好：P.S:

只是增加了高度。

你看到进度元素了吗？谢谢，但它仍然不起作用。它正在画所有的进度条。这里：@LuAmbros我想你没有在上一个示例中添加jQuery。真的，它在这里工作，谢谢！我不知道怎么做，但它不是在线工作！Myabe因为我有很多进度条…你有什么想法吗？我怎样才能自动应用到很多进度条？这是演示：@Musa非常感谢！我根据您的代码创建了颜色条件：

$(document).on("click", "#increase", function () {
    var currentWidth = $('.progress-bar').width();
    currentWidth += 5;
    $('.progress-bar').css('width', currentWidth + 'px');
    if (currentWidth < 100) {
        $('.progress-bar').css('background-color', 'red');
    } else if (currentWidth < 200) {
        $('.progress-bar').css('background-color', 'yellow');
    } else {
        $('.progress-bar').css('background-color', 'green');
    }
});