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 demo

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

Answer 1

如其他地方所述，问题是HTMLElement.style从元素的style属性中检索值;当您使用CSS设置样式时，需要使用window.getComputedStyle(element, null).width：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

参考文献：

Answer 2

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

请参阅Documentation。

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

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

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

Answer 3

该样式仅允许访问放入elem.style的信息。在您的示例样式中，没有说明CSS中定义的边距。使用getComputedStyle()。

var computedStyle = getComputedStyle(document.getElementsByClassName("overlay")[0], null)

alert(computedStyle.width);

jsfiddle demo

Answer 4

.style只是内联style="width:100px;" ...

如果是CSS（而不是内联），则需要getComputedStyle -

https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle

Javascript元素样式

4 个答案: