JavaScript 元素样式

我很好奇为什么是这个

<div class = "overlay">
    fdsfsd
</div>
.overlay{
    width: 100px;
    height: 200px;
    background-color:red;
}
alert(document.getElementsByClassName("overlay")[0].style.width); 

没有任何警报。我当然可以写<div style = "width:100px">然后一切正常，但这对我来说不好，我需要css。 在这里你可以找到一个jsfiddle 演示

所以确切的问题是：为什么这段代码不提醒 div 的宽度以及如果宽度由 css 给定，如何提醒它？

正如其他地方所指出的，问题在于HTMLElement.style从中检索值style元素的属性；当你使用 CSS 设置样式时，你需要使用window.getComputedStyle(element, null).width:

var elem = document.getElementsByClassName("overlay")[0],
  width = window.getComputedStyle(elem, null).width;

console.log(width);

.overlay {
  width: 100px;
  height: 200px;
  background-color: red;
}

<div class="overlay">
  fdsfsd
</div>

参考：

• HTMLElement.style.
• window.getComputedStyle().