如何在运行时更改引导程序（twitter）进度条的颜色答案

【问题标题】：How to change the color of a bootstrap (twitter) progress bar at runtime如何在运行时更改引导程序（twitter）进度条的颜色
【发布时间】：2012-04-14 16:44:42
【问题描述】：

我正在使用这个进度条：

http://twitter.github.com/bootstrap/components.html#progress

并且想给它一个自定义颜色，只在运行时知道（所以不能在 css 或更少的文件中硬编码）

我已经试过了：

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

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

没有成功。

【问题讨论】：

标签： javascript css twitter-bootstrap

【解决方案1】：

您应该更改容器 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。

希望对你有帮助。

【讨论】：

请考虑编辑您的答案，以免将来成为链接无用的答案。
嗨莱安德罗。我的观点是：“不要在你的 js 中弄乱颜色，你可以将元素类更改为 progress-whatever，这是 bootstrap 提供的预定义类”。我敢肯定有很多关于 SO 解释如何在运行时更改元素上的 css 类的问题。如果您更喜欢剪切和粘贴，请查看其他答案。
感谢您的回复。其实我问你是SO的礼仪规则。

【解决方案2】：

您的代码实际上正在运行，只是进度条实际上使用渐变作为颜色而不是纯background-color 属性。要更改背景颜色，请将background-image 设置为none，然后您的颜色将被拾取：

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

【讨论】：

@MaxL。我很高兴 :) 如果答案令人满意，请勾选您选择的答案旁边的绿色复选标记，以结束问题。

【解决方案3】：

您的意思是如何在运行时将颜色更改为另一种颜色？

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

HTML

<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 );
});

http://jsfiddle.net/LewisCowles1986/U9xw6/

【讨论】：

【解决方案4】：

现在有一个引导 3.2 进度条设计器工具。

http://bootstrapdesigntools.com/tools/bootstrap-progress-bar-designer/

【讨论】：