使用JavaScript更改进度栏的宽度

Question

我尝试使用Java脚本更改bootstrap进度栏的宽度，但是没有用。我在头部分中编写了此代码。 请指教。

document.getElementsByClassName("progress-bar").setAttribute("style", "width:50%");
document.getElementsByClassName("progress-bar").style.width = "width:50%";

HTML：

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
    </div>
</div>

Answer 1

getElementsByClassName（）将返回节点列表，您应指定要更改的节点的索引：

document.getElementsByClassName("progress-bar")[0].setAttribute("style", "width:50%");
document.getElementsByClassName("progress-bar")[0].style.width = "50%";

希望这可以帮助。

Answer 2

我建议您使用document.querySelector它返回单个元素
所有主要的浏览器都支持

这是不正确的

document.getElementsByClassName("progress-bar").style.width = "width:50%";
//must be
document.getElementsByClassName("progress-bar").style.width = "50%";

下面的结帐演示

 var percent = 10; document.querySelector(".progress-bar").style.width = percent + "%"; function increase(){ percent = percent > 90 ? 10 : percent + 10; document.querySelector(".progress-bar").style.width = percent + "%"; } 

 .progress{ background: red; padding: 3px; } .progress-bar{ background: blue; height: 10px; } 

 <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> </div> </div> <hr /> <button onclick="increase()">increase</button>