如何使用Javascript更改进度条的颜色？

Question

请查看我目前的代码（jsfiddle）。

我正在尝试在进度条达到最大容量时改变颜色。

我该如何实现？

HTML代码：

<textarea></textarea>
<span id="characters">255 left</span>

<br>
<progress id="myProgress" value="0" max="255">
</progress>

JS 代码：

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
     var max = 255;
    var cs = $(this).val().length;
    document.getElementById("characters").innerHTML= max-cs + " left..";
    document.getElementById("myProgress").value = cs;
    if (event.which < 0x20) {
        return;
      }
    if (cs == max) {
        event.preventDefault();
        // make the color of progress bar red here!! 
      }     

}

- psj01

---

可能是如何为CSS3 HTML5进度元素设置颜色？的重复问题。 - hopkins-matt

@hopkins-matt 不是很准确，因为那里没有JS。 - Omri Aharon

@OmriAharon OP 正在问如何更改颜色。可以使用 CSS 更改颜色。如果 OP 不知道如何使用 JS 更改 CSS，则这将成为 https://dev59.com/UHRB5IYBdhLWcg3wn4jc 的重复问题。 - hopkins-matt

如果您复制并粘贴多个字符，可能会超过您的cs == max检查。您可能需要检查cs >= max，并可能进行其他检查，以确保您无法粘贴超过255个字符的文本。 - TJ Rockefeller

@TJRockefeller 谢谢.. 我没意识到那个。 :) - psj01

Answer 1

在 CSS 中添加 progress::-webkit-progress-value，它可以更改颜色，并使用 jQuery 来定义它。

      if(cs>=max) 
      $('#myProgress').css("background-color", "red");

或者您可以指定一个类，该类将分配背景颜色，例如：

      if(cs>=max) 
      $('#myProgress').addClass("red");

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
  var max = 255;
    var cs = $(this).val().length;
    if(cs>max) $(this).val($(this).val().toString().substring(0,max));
    document.getElementById("characters").innerHTML= max-cs + " left..";
    document.getElementById("myProgress").value = cs;
      if(cs>=max){
        $('#myProgress').addClass("red");
        }
      else{
        $('#myProgress').removeClass("red");

        }
    if (event.which < 0x20) {
        return;
      }
    if (cs >= max) {
        event.preventDefault();
        // make the color of progress bar red here!! 
      }     
      
}

progress.red{
  background-color:red;
  color:red;
  }
progress.red[value] {color:red} /* IE10 */
progress.red::-webkit-progress-bar-value {background-color:red}
progress.red::-webkit-progress-value {background-color:red}
progress.red::-moz-progress-bar {background-color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea></textarea>
<span id="characters">255 left</span>

<br>
<progress id="myProgress" value="0" max="255">
</progress>

- jafarbtech

---

你能解释一下为什么需要CSS吗？我不明白为什么需要progress::-webkit-progress-bar-value...来使它变红...没有CSS的话，它只会变成绿色（这也是我不明白的）... - psj01

实际上，浅蓝色（未完成）和绿色（至少完成一次）是默认的组合。因此，为了覆盖它，我们使用了三种浏览器标准：webkit、moz和IE（它使用颜色）。这就是为什么如果您删除CSS，它会显示默认值。-webkit-progress-bar实际上表示<progress>的背景颜色。 - jafarbtech

谢谢。我真的很喜欢添加类的想法。 - psj01

我很高兴它能帮到你 :) - jafarbtech

Answer 2

编辑: 为了确保这在大多数浏览器中都有效，您应该使用background-color而不是color。

由于您已经在使用JQuery：

$('#myProgress').css("background-color", "red");

纯JS：

document.getElementById('myProgress').style.backgroundColor = 'red';

- ThatBrianDude

---

在除IE浏览器之外的浏览器中，您应该使用“background”或“background-color”而不是“color”。 - grunk

Answer 3

请检查此更新的代码片段

$(document).on('keyup keydown', 'textarea', updateCount);

function updateCount(event) {
    var max = 255;
    var cs = $(this).val().length;
    $("#characters").html(max - cs + " left..");
    $("#myProgress").val(cs);
    if (event.which < 0x20 && cs == max) {
        return;
    }
    if (cs == max) {
        event.preventDefault();
        $('#myProgress').addClass("red");
    } else {
        $('#myProgress').removeClass("red");
    }
}

progress.red {
    background-color: red;
    color: red;
}
progress.red[value] {
    color: red
}
progress.red::-webkit-progress-bar-value {
    background-color: red
}
progress.red::-webkit-progress-value {
    background-color: red
}
progress.red::-moz-progress-bar {
    background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<span id="characters">255 left</span>
<br>
<progress id="myProgress" value="0" max="255"></progress>

- Super User

Answer 4

只需添加

document.getElementById("myProgress").style.background = "#f3f3f3";

一旦您达到最大值

这应该可以正常工作

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
     var max = 255;
    var cs = $(this).val().length;
    document.getElementById("characters").innerHTML= max-cs + " left..";
    document.getElementById("myProgress").value = cs;
    if (event.which < 0x20) {
        return;
      }
    if (cs == max) {
             document.getElementById("myProgress").style.background = "#f3f3f3";
        event.preventDefault();
        // make the color of progress bar red here!! 
      }     

}

- user3187960

---

这使得进度条的颜色对我来说是绿色的。https://jsfiddle.net/aoqwvax2/ - Gavin