Question

奇怪的事情发生了，我不确定它是什么。我创建了一堆元素，我想获得进度条的宽度，以便我可以在我的JS代码中使用它。

在我的JS中我做了：

var bar = document.getElementById('progressBar');
console.log(bar.style.width); //empty string

然而在我的CSS中我有

#progressBar{
  width: 600px;
  border: 2px solid black;
}

我可以在浏览器中清楚地看到600px容器及其周围的边框，但由于某些原因，JS不知道这些CSS设置。

任何想法可能是什么问题？

编辑：这与建议的重复不同 - 问题不在于我不知道如何获取值，问题是style.value没有得到我所期望的。< / p>

Answer 1

这是正确的行为。

DOMElement的style属性负责inline个样式，而不是实际的计算值。要获得宽度，请使用getClientRects或getBoundingClientRect。

e.g。

var bar = document.querySelector('.bar');
console.log(bar.style.width); // empty string
console.log(bar.getBoundingClientRect().width); // 100px

.bar {
  width: 100px;
  height: 20px;
  background: blue;
}

<div class='bar'></div>