HTML中style.width和offsetwidth的区别？

Question

我注意到offsetwidth的数字略大一些。同样适用于style.height和offsetheight。

Answer 1

  

通常，元素的offsetWidth是一个度量，它包括元素边框，元素水平填充，元素垂直滚动条（如果存在，如果呈现）和元素CSS宽度。

来源：https://developer.mozilla.org/en/DOM/element.offsetWidth

---

因此，它是包含边框和填充的元素的宽度。高度也一样。

Answer 2

offsetWidth返回计算元素的宽度，而el.style.width只返回 element.style 中javascript定义的宽度属性，并不反映实际元素的尺寸。< / p>

这意味着如果您尝试通过访问el.style来获取元素的宽度，即使宽度已在CSS中定义，您也可能无法获得任何内容（sample）。只有在el.style javascript中offsetWidth定义了数字时，您才能获得该数字。

此外，padding为您提供元素的实际宽度，包括border和content-box，如果您使用box-sizing css box model这是{{的默认值1}}。因此，您可以像设置元素内容的width一样考虑这一点，padding/border将其放在首位（sample）。

如果您使用 border-box css box model，则可以设置元素的总宽度，包括padding和border使内容区域变小（ sample）。因此，在这种情况下，offsetWidth和el.style.width会返回完全相同的数字（如果先前由el.style.width设置javascript）。

Answer 3

offsetWidth是元素CSS宽度的度量单位，包括任何边框，填充和垂直滚动条。

clientWidth是内部宽度（即元素内部的空间，包括填充，但不包括边框和滚动条）

仅返回已定义的CSS