Javascript元素样式

Question

我好奇为什么这个

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

没有提醒任何事情.当然我可以写,<div style = "width:100px"> 然后everthing工作正常,但它对我不好,我需要CSS.在这里你可以找到一个jsfiddle演示

所以确切的问题是:为什么这段代码没有警告div的宽度以及如果宽度由css给出,它会如何警告？

Answer 1

如其他地方所述,问题是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().

Answer 2

JavaScript .style仅与元素上的内联样式相关.

见文档.

如果你想获得你应该使用的元素的宽度offsetWidth.

document.getElementsByClassName("overlay")[0].offsetWidth

http://jsfiddle.net/9kwap3zy/7/