Analysis of the difference between offsetheight,clientheight,scrollheight _javascript skills

Search on the Internet, the conclusion is very general, speak IE never speak version, so they did the test and upload the conclusion. The conclusion is that the test is passed in standard mode, and there is no test quirk mode.

ClientHeight

Most browsers have no objections to clientheight, which is considered to be the height of the content viewable area, that is, the height of the area of the content can be seen in the page browser, that is, the area where the content can be seen, the scroll bar is not counted. But pay attention to padding is counted. The calculation mode is clientheight = toppadding + bottompadding+ height-scrollbar.height.

Offsetheight
In IE6,IE7,IE8 and the most recent FF, Chrome, the elements are offsetheight = clientheight + scroll bar + border.

ScrollHeight
ScrollHeight is the height of the element's padding plus element content. This height is independent of the scroll bar and is the actual height of the content.

Calculation mode: scrollheight = toppadding + bottompadding + content margix box height.

The difference in the browser is:

IE6, IE7 think ScrollHeight is the actual height of Web page content, can be less than clientheight.

FF, Chrome thinks scrollheight is the content height of the Web page, but the minimum value is clientheight.

Note: The above are for the general elements of the dialect, body and documentelement of the clientheight, Offsetheight and ScrollHeight in the various browsers are calculated differently. In all browsers, if you want to get the height of the entire window, you have to use Documentelement.clientheight, because the body.clientheight is determined by its contents. These properties about the body and the documentelement are completely different:

FF19

Set Overflow:scroll on the body is to set the browser scroll bar, resulting in body.clientheight is always equal to body.scrollheight.

Body
clientheight:body.padding+ body.height (CSS settings or content supports);

offsetheight:clientheight+ Body.border;

scrollheight== clientheight.

DocumentElement
clientheight= Window window is highly-scrollbar.width.

offsetheight= Body.offsetheight + body.margin.

The height of the scrollheight= content (regardless of the body's height style), but the minimum value is documentelement.clientheight.

Element on
offsetheight= padding + border + height.

clientheight= padding + height-scrollbar.width.

scrollheight>= clientheight

From the result analysis, FF thinks that the minimum height of scrollheight is clientheight.

Offsetleft = the distance from the upper-left corner of the element border to the window window's origin or to the top of the offsetparent BorderBox.

Chrome
Body
clientheight= body.padding + body.height (CSS settings or content braces);

offsetheight = Body.clientheight + Body.border;

The height of the scrollheight= body.padding + content (regardless of the height style), but the minimum value is documentelement.clientheight.

DocumentElement
clientheight= Window Window Height-scroll bar height.

offsetheight = Body.offsetheight + body.margin;

ScrollHeight = The height of the content (regardless of the height on the body), but the minimum value is documentelement.offsetheight.

Element on
offsetheight = padding + border + height.

clientheight = padding + height-scrollbar.width.

ScrollHeight >= clientheight

Safari 5
Body
clientheight= body.padding + body.height (CSS or content supports);

offsetheight= clientheight + border;

The height of the scrollheight= body.padding + content (regardless of the height style), but the minimum value is documentelement.clientheight.

DocumentElement
clientheight = window Size-scroll bar size

offsetheight = Body.offsetheight + body.margin

The height of the scrollheight= content (regardless of the height on the body), but the minimum value is documentelement.offsetheight.

IE8
Under IE8, the scroll bar is 17 pixels in size.

Body
clientheight= body.padding + body.height (CSS settings or content braces)

offsetheight = clientheight + body.border

ScrollHeight = The height of the content (regardless of the height on the body), but the minimum value is clientheight.

DocumentElement
clientheight = window size (after the scroll bar is removed)

offsetheight = clientheight + scroll bar size + Body.border

The height of the scrollheight= content (regardless of the height on the body), but the minimum value is body.offsetheight+ margin.

Element on
offsetheight = padding + border + height.

clientheight = padding + height-scrollbar.width.

ScrollHeight >= clientheight

From the result analysis, FF thinks that the minimum height of scrollheight is clientheight.

Offsetleft = the distance from the upper-left corner of the element border to the origin of the canvas or to the top of the offsetparent BorderBox.

IE7
In IE7, the scroll bar set on the body is not the scroll bar of the window, which requires attention.

Body
clientheight= body.padding + height (CSS settings or content braces) on the –body scroll bar.

offsetheight= clientheight + scroll bar size +body.border.

The height of the scrollheight= content (independent of the height on the body).

DocumentElement
clientheight = window window size (has nothing to do with scroll bar)

Offsetheight = clientheight.

ScrollHeight = Body.offsetheight + border.margin

Elements
offsetheight = padding + border + height.

clientheight = padding + height-scrollbar.width.

scrollheight = padding + content Marginbox height

From the result analysis, IE7 that scrollheight can be smaller than clientheight.

Offsetleft = the distance from the upper-left corner of the border box to the upper-left corner of the parent container (not offsetparent).

IE6
In IE6, similar to IE7, the scroll bar set on the body is not a scroll bar for the window.

Body
ClientHeight = body.padding + body.height

offsetheight = body.clientheight + body.border + body scroll bar size.

ScrollHeight = The height of the content (regardless of height on the body).

DocumentElement
In IE6, similar to IE7, although the scroll bar set on the body is not a window scroll bar, its clientheight and offsetheight are also considered to be unified with other browsers.

clientheight = window size (after the window scroll bar size is dropped)

Offsetheight =clientheight + Body.border

ScrollHeight = Body.offsetheight + body.margin

Elements
offsetheight = padding + border + height.

clientheight = padding + height-scrollbar.width.

scrollheight = padding + content margin Box height

From the result analysis, IE6 that scrollheight can be smaller than clientheight.

Similarly

The explanations for clientwidth, offsetwidth and ScrollWidth are the same as the above, except that the height is changed to width.