Javascript 如何在运行时更改引导（twitter）进度条的颜色

我正在使用此进度条：

并想给它一个自定义颜色，只有在运行时才知道 （因此，在css或更少的文件中对其进行硬编码不是一个选项）

我试过这个：

<div class="progress">
  <div id='pb' class="bar" style="width: 80%"></div>
</div>

<script>
  $('#pb').css({'background-color': "red"})
</script>

$（'#pb'）.css（{'background-color'：“red”}）

---

没有成功。

您应该更改container div类以更改颜色

使用红色的进度危险的示例：

<div class="progress progress-danger">
  <div class="bar" style="width: 60%;"></div>
</div>

更多颜色（只需替换类名中的进度按钮）。

更新： 为了在运行时使用javascript添加类名，请查看或使用jQuery

---

希望能有所帮助。

您的代码实际工作正常，只是进度条实际上使用了渐变色作为颜色，而不是纯色

背景色

属性。要更改背景颜色，请将

背景图像

设置为

无

，然后将拾取您的颜色：

$('#pb').css({
    'background-image': 'none',
    'background-color': 'red'
});

---

你的意思是如何在运行时将颜色相互转换

我只能想象你做了什么，因为你没有标记任何人是正确的。如果你是这个意思，那么看看这个非常小的JSFIDLE

HTML

JS

jQuery（文档）.ready（函数（）{
窗口百分比=0；
window.progressInterval=window.setInterval（函数（）{
如果（窗口百分比<100）{
window.percent++；
jQuery（'.progress'）.addClass（'progress-striped'）.addClass（'active'）；
jQuery（'.progress.bar:first'）.removeClass（）.addClass（'bar'））
.addClass（（百分比<40）-“酒吧危险”：（百分比<80）-“酒吧警告”：“酒吧成功”）；
jQuery（'.progress.bar:first'）.width（window.percent+'%'）；
jQuery（'.progress.bar:first'）.text（window.percent+'%'）；
}否则{
window.clearInterval（window.progressInterval）；
jQuery（'.progress'）.removeClass（'progress-striped'）.removeClass（'active'）；
jQuery（'.progress.bar:first'）.text（'Done！'）；
}
}, 100 );
});

---

现在有一个Bootstrap3.2进度条设计器工具

---

@MaxL。我很高兴：如果答案是令人满意的，请在你选择的答案旁边划上绿色的复选标记，以结束这个问题。请考虑编辑你的答案，以免在将来成为一个链接无用的答案。嗨，Leandro。我的观点是：“不必在js中弄乱颜色，只需将元素类更改为progress anywhere，这是bootstrap提供的预定义类”。我相信在解释如何在运行时更改元素上的css类时，会有很多问题。如果您喜欢剪切粘贴，请查看其他答案。谢谢您的回复。事实上，我问你的是一个埃蒂奎特规则，所以。

<div class="progress">
    <div class="bar bar-success" style="width: 0%; opacity: 1;"></div>
</div>

jQuery(document).ready( function(){
    window.percent = 0;
    window.progressInterval = window.setInterval( function(){
        if(window.percent < 100) {
            window.percent++;
            jQuery('.progress').addClass('progress-striped').addClass('active');
            jQuery('.progress .bar:first').removeClass().addClass('bar')
            .addClass ( (percent < 40) ? 'bar-danger' : ( (percent < 80) ? 'bar-warning' : 'bar-success' ) ) ;
            jQuery('.progress .bar:first').width(window.percent+'%');
            jQuery('.progress .bar:first').text(window.percent+'%');
        } else {
            window.clearInterval(window.progressInterval);
            jQuery('.progress').removeClass('progress-striped').removeClass('active');
            jQuery('.progress .bar:first').text('Done!');
        }
    }, 100 );
});