javascript - 从 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 而不是使用 vanilla JS 访问元素的宽度？是因为外部 CSS 规则不是 DOM 的一部分吗？

score 3 · Accepted Answer

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

document.getElementById("foo").offsetWidth;

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

score 1 · Accepted Answer

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

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

2 回答 2