我开始使用vanilla JavaScript开发一个简单的进度条。至于获取CSS中设置的宽度，我发现使用JS的唯一方法是使用.offsetWidth - 以下是我开始设置的功能演示的代码。小提琴链接位于问题的底部。
HTML：
<section id="box"></section>
<p>
<section id="box2"></section>
CSS：
#box, #box2 {
height: 10px;
width: 5px;
background-color: lightBlue;
}
#box2 {
width: 4px;
}
JavaScript（onload）：
var savedwidth = document.getElementById("box").offsetWidth;
alert("box 1 width " + savedwidth);
savedwidth = document.getElementById("box2").offsetWidth;
alert("box 2 width " + savedwidth);
在测试它以确定它是否准确抓住属性时，我注意到当宽度设置为5px时它返回6px。其他一切似乎都很好。
4px = 4px，6px = 6px。
如果有人知道为什么会这样，我很好奇吗？它足够小，它不会影响我似乎想要做的事情，但你知道的越多，你就越好。