Question

我的HTML中有这个。我想基于％动态应用背景。

如果我超过30，则div的30％应为绿色。如果它是60，那么60％的div应该是绿色的

    <div id="progress_bar" class="meter-bg">
        by default white
    </div>

默认情况下它的背景为白色。但是当我点击按钮时。

    <input type="submit" value="30"/>

它必须将30％的绿色应用于progress_bar。我怎么能在Jquery

中做到这一点

感谢。

Answer 1

背景尺寸

您可以将background-size property用于支持它的浏览器。

$('input').click(function(){
    $('#progress_bar').css('background-size', '30%');
});

更兼容

否则我会在#progress_bar中使用div来包含实际背景，如下所示：

<div id="progress_bar">
    <div id="progress_bar_line" class="meter-bg"></div>
</div>

然后你可以设置内部div的width属性：

$('input').click(function(){
    $('#progress_bar_line').css('width', '30%');
});

Answer 2

另一种选择是在白色div（div 1）的顶部覆盖一个绿色背景的div（div2），并将其宽度设置为div 2.width = div 1.width * .30