scrollHeight,offsetHeight,clientHeight的本质区别

scrollHeight,offsetHeight,clientHeight的本质区别

1).element.scrollHeight (只读)

总结
scrollHeight是指元素的滚动视图的高度(Height of the scroll view of an element，即有滚动条时从头部滚动到尾部的高度),它包括元素的内边距,但不包括外边距.
Height of the scroll view of an element; it includes the element padding but not its margin.

语法
var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;

描述
一个元素的scrollHeight是元素的内容(包括因为溢出而不可见的部分内容)的高度.
如果元素的内容生成垂直滚动条,则它的scrollHeight属性值等于它的clientHeight属性值.这意味着内容区需要一个滚动条或者元素含有一个overflow:visible(非滚动)的样式值.
An element's scrollHeight is a measurement of the height of an element's content including content not visible on the screen due to overflow.
If the element's content generated a vertical scrollbar, the scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. When an element's content does not generate a vertical scrollbar, then its scrollHeight property is equal to its clientHeight property. This can mean either the content is too short to require a scrollbar or that the the element has CSS style overflow value of visible (non-scrollable).

例子

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

LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom

详述
scrollHeight是MSIE的DHTML模型的一部分,并不是W3C草案或技术推荐.

2).element.offsetHeight (只读)

总结
相对元素的父元素的元素高度值
Height of an element relative to the element's offsetParent.

语法
var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;

描述
元素的offsetHeightw值包括该元素的边框,元素的垂直内边距,元素的水平滚动条(若出现水平滚动条),以及元素的样式高度.
非滚动元素(没有设置overflow值，或设置为visible)将拥有相等的offsetHeight和scrollHeight值.
Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.
Non-scrollable elements (CSS overflow not set or set to visible) will have equal offsetHeight and scrollHeight (is this right? scrollHeight doesn't include the border, while offsetHeight would include border).
For the document body object, the measurement includes total linear content height instead of the element CSS height. Floated elements extending below other linear content are ignored.

例子

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

LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom

详述
http://www.w3.org/TR/cssom-view/#offset-attributes

注释
offsetHeight is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred to as an element's physical/graphical dimensions, or an element's border-box height.

The example image above shows a scrollbar and an offsetHeight which fits on the window. However, non-scrollable elements may have large offsetHeight values, much larger than the visible content. These elements are typically contained within scrollable elements; consequently these non-scrollable elements may be completely or partly invisible, depending on the scrollTop setting of the scrollable container.

3).element.clientHeight (只读)

总结
返回元素的内高度(the inner height of an element),包括内边距,但不包括水平滚动条的高度,也不包括边框及外边距.
clientHeight计算公式:
clientHeight = CSS height + CSS padding - 水平滚动条的高度(若出现水平滚动条)

Returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

语法
var h = element.clientHeight;

例子

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 fromhttp://www.best-cat-art.com/

padding-bottom

LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom

详述
非W3C推荐标准

注释
clientHeight is a non-standard, HTML-specific property introduced in the Internet Explorer object model.

offsetLeft returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for span elements in flowed text that wraps from one line to the next. The span may start in the middle of the page and wrap around to the beginning of the next line. The offsetLeft will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)

参考及相关阅读

MSDN: scrollHeight Property
MSDN: offsetHeight Property
MSDN: clientHeight Property

MSDN: Measuring Element Dimension and Location

DOM:element.scrollHeight
DOM:element.offsetHeight
DOM:element.clientHeight

Determining the dimensions of elements

原文:
https://developer.mozilla.org/en/DOM/element.scrollHeight
https://developer.mozilla.org/en/DOM/element.offsetHeight
https://developer.mozilla.org/en/DOM/element.clientHeight