javascript - 使用 javascript 更改 id 宽度百分比

Question

我正在尝试编写一个百分比目标栏。我似乎无法更改 javascript 中的#bar 宽度百分比。有什么建议吗？？抱歉乱码。我有理由选择 -20 * -1。我只需要专注于改变 id 宽度百分比。

CSS:

.graph {
  width: 500px; /* width and height are arbitrary, just make sure the #bar styles are changed accordingly */
  height: 30px;
  border: 1px solid #888; 
  background: rgb(168,168,168);
  position: relative;
}
#bar {
  height: 29px; /* Not 30px because the 1px top-border brings it up to 30px to match #graph */
  width: 34%;
  float: left;
  background: rgb(255,197,120); 
  border-top: 1px solid #fceabb;
}

JS :

var _first = -20 * -1;
var _second = 150;
var _third = _first / _second * 100;
document.getElementById('bar').style.width = _third + "%";

HTML :

<center><div id="progress" class="graph"><div id="bar"></div></div></center>

Answer 1

因为 JS 在 DOM 准备就绪之前加载，它找不到 ID 为 bar 的 div 尚未加载，您应该将代码放在 加载函数:

window.onload=function(){
    var _first = -20 * -1;
    var _second = 150;
    var _third = _first / _second * 100;

    document.getElementById('bar').style.width = _third + "%";
}

希望这对您有所帮助。