从javascript访问CSS规则

Question

假设我有以下内容。

HTML：

<div id="foo"></div>

CSS：

#foo{
   width: 150px;
}

JS：

document.getElementById("foo").style.width //Equals to "" instead of 150px
$("#foo").css("width") //equals to the expected "150px"

或this JSFiddle。 为什么我们可以使用jQuery访问元素的宽度但不使用vanilla JS？是因为外部CSS规则不是DOM的一部分吗？

Answer 1

试试offsetWidth。当您尝试访问style.width时，它将只为您提供分配给元素样式属性的宽度。但在你的情况下，它通过css规则分配宽度。

document.getElementById("foo").offsetWidth;

<强> Fiddle

编辑：clientWidth可能更合适，因为它会为您提供元素的内部宽度，其中offsetWidth也会考虑边框，边距。

Answer 2

使用getComputedStyle。请参阅此更新fiddle：

computedWidth = window.getComputedStyle(document.getElementById("foo"), null).
                getPropertyValue("width");

elem.style只会返回与元素相关联的内联样式，即style=""属性的内容。