Javascript HTML 中 style.width 和 offsetwidth 的区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8133146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Difference between style.width and offsetwidth in HTML?
提问by yeeen
I notice that offsetwidthis a slightly bigger number. Similarly for style.heightand offsetheight.
我注意到这offsetwidth是一个稍大的数字。style.height和类似offsetheight。
采纳答案by Tim S.
Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.
通常，元素的 offsetWidth 是一个度量，包括元素边框、元素水平填充、元素垂直滚动条（如果存在，如果呈现）和元素 CSS 宽度。
Source: https://developer.mozilla.org/en/DOM/element.offsetWidth
来源：https: //developer.mozilla.org/en/DOM/element.offsetWidth
So, it's the width of your element with border and padding included. Same thing for height.
因此，它是包含边框和填充的元素的宽度。身高也是一样。
回答by sol0mka
offsetWidthreturns computed element's width, while el.style.widthjust returns width property defined in element.styleby javascriptand does not reflect real element's dimensions.
offsetWidth返回计算元素的宽度，而el.style.width只返回element.styleby 中定义的宽度属性javascript，并不反映实际元素的尺寸。
This means that if you will try to get a width of the element by accessing el.style, you will probably get nothing (sample), even if the width was defined in your CSS. You will get the number only if it was defined in el.styleby javascript.
这意味着，如果您尝试通过访问来获取元素的宽度el.style，您可能什么也得不到 ( sample)，即使宽度是在您的 CSS 中定义的。只有在el.style由javascript.
Furthermore, offsetWidthgives you real width of your element, including paddingand borderif you use content-boxcss box modelwhich is default value for box-sizing. So you can think about that like you set widthof the contents of the element and padding/bordergo on top of that (sample).
此外，offsetWidth给你你的元素的实际宽度，包括padding和border如果你使用content-boxcss box model它是默认值box-sizing。因此，您可以像设置width元素的内容一样考虑它并padding/border在其之上 ( sample)。
If you are using border-boxcss box model, you set the total width of the element, including paddingand bordermake the content area smaller (sample). So, in this case, offsetWidthand el.style.widthwould return exactly the same numbers (if el.style.widthwas previously set by javascript).
如果您使用border-boxcss box model，则设置元素的总宽度，包括padding并border缩小内容区域 ( sample)。所以，在这种情况下，offsetWidth并且el.style.width将返回完全相同的号码（如果el.style.width之前被设定javascript）。
回答by LDS
offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars.
offsetWidth 是以像素为单位的元素 CSS 宽度的度量，包括任何边框、填充和垂直滚动条。
clientWidth is the inner width (ie. the space inside an element including padding but excluding borders and scrollbars)
clientWidth 是内部宽度（即元素内的空间，包括填充但不包括边框和滚动条）
with only return the css with defined
仅返回已定义的 css
