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"

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

Answer 1

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

document.getElementById("foo").offsetWidth;

Fiddle

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