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
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
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
非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