从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"

或这个JSFiddle 。 为什么我们可以使用jQuery而不是普通JS来访问元素的宽度？ 是否因为外部CSS规则不属于DOM？

Answer 1

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

document.getElementById("foo").offsetWidth;

小提琴

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

Answer 2

使用getComputedStyle 。 看到这个更新的小提琴 ：

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

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