javascript - HTML 中 style.width 和 offsetwidth 的区别？

Question

我注意到 offsetwidth 是一个稍大的数字。 style.height 和 offsetheight 也是如此。

Answer 1

offsetWidth返回计算元素的宽度，而 el.style.width仅返回由 javascript 在 element.style 中定义的宽度属性，并不反射(reflect)真实元素的尺寸。

这意味着如果您尝试通过访问 el.style 来获取元素的宽度，您可能什么也得不到 (sample)，即使宽度是在您的 CSS 中定义的.仅当 javascript 在 el.style 中定义时，您才会获得该数字。

此外，offsetWidth 为您提供元素的实际宽度，包括 padding 和 border 如果您使用 content-box css box model这是 box-sizing 的默认值。所以你可以这样想，就像你设置元素内容的 width 和 padding/border 一样( sample )。

如果您正在使用边框 css box model ，您设置元素的总宽度，包括 padding 和 border 使内容区域变小(sample)。所以，在这种情况下，offsetWidth和 el.style.width将返回完全相同的数字(如果 el.style.width 之前由 javascript 设置)。