scrollWidth,offsetWidth,clientWidth的本质区别

scrollWidth,offsetWidth,clientWidth的本质区别

1).element.scrollWidth (只读)

总结
scrollWidth是指元素内容的宽度或元素本身的宽度(元素本身的宽度比元素内容的宽度更大).若元素比它的内容更宽,如出现水平滚动条时),scrollWidth > clientWidth.
scrollWidth is a read–only property that returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the scrollWidth is larger than the clientWidth.

语法
var xScrollWidth = element.scrollWidth;

例子
<div id="aDiv" style="width: 100px; height: 200px; overflow: auto;">-FooBar-FooBar-FooBar</div>
<br />
<input type="button" value="Show scrollWidth" onclick="alert(document.getElementById('aDiv').scrollWidth);">

详述
The CSSOM View Module defines scrollWidth

2).element.offsetWidth (只读)

总结
返回元素的布局宽度(the layout width of an element)
Returns the layout width of an element.

语法
var offsetWidth = element.offsetWidth;

描述
一个元素的offsetWidth包含元素的borders,元素的水平padding,若出现垂直滚动条,则也包含元素的垂直滚动条的宽度,以及元素的样式width.
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是MSIE的DHTML模型的一部分,并不是W3C草案或技术推荐.

3).element.clientWidth (只读)

总结
clientWidth是元素的内宽度,它包括元素的内边距,但是不包括垂直滚动条的宽度(即使出现滚动条), 也不包括元素的边框和外边距.
clientWidth is the inner width of an element in pixels. It includes padding but not the vertical scrollbar (if present, if rendered), border or margin.

语法
var intElemClientWidth = element.clientWidth;

例子

Example

详述
clientWidth并不是W3C草案的内容,它是由MSIE DHTML 推荐的.

原文:
https://developer.mozilla.org/en/DOM/element.scrollWidth
https://developer.mozilla.org/en/DOM/element.offsetWidth
https://developer.mozilla.org/en/DOM/element.clientWidth

参考及相关阅读
MSDN: scrollWidth Property
MSDN: offsetWidth Property
MSDN: clientWidth definition
MSDN: Measuring Element Dimension and Location
DOM:element.scrollWidth
DOM:element.offsetWidth
DOM:element.clientWidth
Determining the dimensions of elements