Jquery中基于%的div后台

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

如果我通过30，30%的div应该是绿色的。如果是60，60%的div应该是绿色的

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

默认情况下为白色

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

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

它必须将30%的绿色应用于进度条。我如何在Jquery中做到这一点

谢谢。

背景尺寸 您可以在支持它的浏览器中使用

$('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（div1）的顶部覆盖一个绿色背景的div（div2），并将其宽度设置为div2.width=div1.width*.30

您正在寻找它吗？您可以在此处使用jQuery实现：。如果你想写你自己的，你可以用它作为参考。请注意，颜色可以由jQuery主题控制。其中“对于支持它的浏览器”是一个非常重要的注意事项。请解释下一票，以便我们都可以从您的智慧中学习。

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