javascript - 如何更改进度条的背景颜色

Question

可能重复：
如何更改进度条的颜色

我做了一个简单的进度条，但我不知道如何更改进度条的背景颜色、百分比颜色和文本“上次更新”颜色。有没有应该介绍的代码？请帮我一些代码/演示示例。谢谢

HTML：

  <table>
    <tr>
        <td>Last updated 1/4/2013:</td>
        <td><div class="progress" data-value="0"><span>0%</span></div></td>
    </tr> 

CSS：

.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:200px;padding-right:200px;}
.progress[aria-valuenow="0"] 
span {margin-top:0px;}​ 

JavaScript：

$(document).ready(function() {
    $(".progress").each(function() {
        var progressValue = $(this).data("value");
        $(this).progressbar({
            value: progressValue
        }).children("span").appendTo(this);
    });
});​

Answer 1

要更改百分比栏的背景颜色，请添加以下 CSS 规则：

.progress {
  color: red;
}

对于文本颜色：

我建议首先<h1>在标题周围添加一个标签，使其看起来像这样：

<td><h1>Last updated 1/4/2013:</h1></td>

然后添加这个 CSS 规则：

td h1 {
  color: red;
}

要更改百分比颜色，请添加以下规则：

.progress span {
  color: blue;
}

另外，关闭您的<table>标签。