Question

以下代码无法在我的应用程序中使用

HTML：

<div class="progressBar">
    <div class="progressBarIndicator">
    </div>
</div>

CSS：

.progressBar{background-color: #fff; height:20px;}
.progressBarIndicator{background-color: #000; height:20px;}

JAVASCRIPT：

$('.progressBarIndicator').css({"background-color" : "red"});

Answer 1

首先检查是否存在jquery.min.js。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

如果是，请按照这种方式更改脚本。

<script>
$(document).ready(function(){
   $('.progressBarIndicator').css("background-color","red");
});
</script>

$('.progressBarIndicator').css({"background-color" : "red"});
                               ^                   ^      ^
                            remove  replace with comma   Remove

有关详细信息，请查看此Jquery CSS Method - W3 Schools＆amp; Background CSS Using Jquery - Web Developer Forum

我的更新代码。如果需要，做必要的改变。

<html>
    <head></head>

<body>
    <style>
        .progressBar{
          width: 100%;
          height: 20px;
          background: #fff;
          border-radius: 2px;
          border: 1px solid rgba(199, 197, 197, 1);
        }

        .progressBarIndicator{
          height: 20px;
          background: #019F45;
          overflow: hidden;
          border-radius: 2px;
        }
    </style>

    <div class="progressBar">
        <div class="progressBarIndicator">
    </div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function(){
         $('.progressBarIndicator').css("background", "red");
    });
</script>
</html>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

HTML：

<div class="progressBar">
 <div class="progressBarIndicator">
</div>

CSS：

.progressBar{
  width: 100%;
  height: 20px;
  background: #fff;
  border-radius: 2px;
  border: 1px solid rgba(199, 197, 197, 1);
}

.progressBarIndicator{
  height: 20px;
  background: #019F45;
  overflow: hidden;
  border-radius: 2px;
}

JAVASCRIPT：

$(document).ready(function(){
     $('.progressBarIndicator').css("background", "red");
});

离子变化progressjar中的条形图颜色

2 个答案: