Question

我正在尝试制作进度条。 HTML如下：

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

我想根据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>

你应该看看lilke

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

Fiddle

Answer 2

这是一个“手动”进度条，您可以通过单击按钮来查看它如何随着颜色和大小的变化而变化。只需删除按钮并放入循环中即可自动执行相同的操作。

Demo

<强> HTML

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

<强> CSS

.progress-bar {
    border: 1px solid black;
    width: 5px;
    height: 50px;
}

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

Answer 3

您的代码正常工作您可能需要将代码放在document.ready中，并在div中放入一些文本以查看结果。还要确保你成功地使用了jQuery。

<强> Live Demo

HTML 的

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

的Javascript

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

Answer 4

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

var currentWidth = $('.progress-bar')[0].style.width;
if (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');
    }
});

如何通过元素的宽度更改背景颜色？

4 个答案: