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" οnclick="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.

例子

padding-top

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

Cat image and text coming fromwww.best-cat-art.com

padding-bottom

Left Top Right Bottom margin-top margin-bottom border-top border-bottom

详述
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

padding-top

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

Cat image and text coming fromwww.best-cat-art.com

padding-bottom

Left Top Right Bottom margin-top margin-bottom border-top border-bottom

详述
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