Javascript元素样式

我很好奇为什么是这个

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

fdsfsd
.覆盖{
宽度：100px；
高度：200px；
背景色：红色；
}
警报（document.getElementsByClassName（“覆盖”）[0].style.width）；

没有任何警报。我当然会写

然后一切都很好，但这对我不好，我需要css。 在这里你可以找到一个

---

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

JavaScript

。style

只与元素上的内联样式相关

看

如果要获取元素的宽度，应使用

offsetWidth

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

---

该.style是内联的

style=“width:100px；”

仅限于

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

---

如其他地方所述，问题在于

HTMLElement.style

从元素的

style

属性检索值；在使用CSS设置样式时，您需要改用

window.getComputedStyle（element，null）。width

：

var elem=document.getElementsByClassName（“覆盖”）[0]，
宽度=window.getComputedStyle（elem，null）.width；
控制台。原木（宽度）
.overlay{
宽度：100px；
高度：200px；
背景色：红色；
}

fdsfsd
该样式仅允许访问放入
元素样式中的信息。在您的示例中，样式不会告诉任何关于CSS中定义的边距的信息。使用

不知道是谁否决了这一点：/但是可能想
parseInt
@digiizmo:我也不知道，这有点烦人（但他们大概有他们的理由）。我不确定是否要使用
parseInt（）
（或
parseFloat（）
），因为没有单位的宽度（即使JavaScript总是在
px
中返回长度）似乎有点无意义；而且没有提到想要“仅仅”数字。如果问题被更新为请求，那么我将更新，因为这似乎还为时过早。ye，我只是出于意识才提到它-通常，您只在需要操纵宽度或在其他计算中使用该值时获取宽度。
var computedStyle = getComputedStyle(document.getElementsByClassName("overlay")[0], null)

alert(computedStyle.width);