HTML中style.width和offsetwidth的区别？

Question

我注意到这个offsetwidth数字略大一些.同样的style.height和offsetheight.

Answer 1

offsetWidth传回计算元素的宽度,而el.style.width只是返回定义width属性element.style通过javascript,并不能反映真实的元件的尺寸.

这意味着如果你试图通过访问获得元素的宽度el.style,你可能会得到任何东西(sample),即使你的CSS中定义了宽度.您将获得只有当它在定义数量el.style的javascript.

此外,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).

Answer 2

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

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

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