CSS样式已应用并显示，但是JS无法识别所应用的CSS

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不能得到我期望的值。

Answer 1

这是正确的行为。

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

例如

 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> 

您可能也对以下内容感兴趣： 如何获得计算样式？