如何在运行时更改引导程序(twitter)进度条的颜色

Question

我正在使用此进度条:

并且想给它一个自定义颜色,只在运行时知道(所以在css或更少的文件中硬编码不是一个选项)

我试过这个:

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

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

没有成功.

Answer 1

您的代码实际上正在工作,只是进度条实际上使用渐变作为颜色而不是实体background-color属性.要更改背景颜色,请设置background-image为none,您的颜色将被拾取:

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

Answer 2

现在有一个bootstrap 3.2进度条设计器工具.

Answer 3

您应该更改容器 div 类才能更改颜色。

使用 .progress-danger 表示红色的示例：

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

更多颜色（只需替换类名称中的进度按钮）。 http://twitter.github.com/bootstrap/base-css.html#buttons

更新： 为了在运行时使用 javascript 添加类名，请查看http://snipplr.com/view/2181/或http://api.jquery.com/addClass/（如果您使用的是 jQuery）。

希望能帮助到你。