Parsing offsetHeight, clientHeight, and scrollHeight _ javascript skills

This article mainly describes the differences between offsetHeight, clientHeight, and scrollHeight. If you need them, you can refer to them. I hope you can find some help on the Internet. The conclusion is very general, I never talked about IE versions, so I did a test and uploaded the conclusion. The following conclusions are all passed in the standard mode, and the quirk mode is not tested.

ClientHeight

Most browsers have no objection to clientHeight and think it is the height of the visible area of the content. That is to say, the height of the area where the content can be viewed in the page browser, that is, the area where the content can be viewed, the scroll bar is not included. Note that the padding is included. The calculation method is clientHeight = topPadding + bottomPadding + height-scrollbar. height.

OffsetHeight
In IE6, IE7, IE8, and the latest FF, Chrome, the elements are both offsetHeight = clientHeight + scroll bar + border.

ScrollHeight
ScrollHeight is the height of the element content added to the element's padding. This height is irrelevant to the scroll bar and is the actual height of the content.

Calculation method: scrollHeight = topPadding + bottomPadding + content margix box height.

The difference in browsers is:

IE6 and IE7 hold that scrollHeight is the actual height of the webpage content, which can be smaller than clientHeight.

FF and Chrome think that scrollHeight is the height of the webpage content, but the minimum value is clientHeight.

Note: The above are general elements and dialects. The clientHeight, offsetHeight, and scrollHeight of the body and documentElement are calculated differently in different browsers. In all browsers, if you want to get the height of the entire window, you must use documentElement. clientHeight, because body. clientHeight is determined by its content. These attributes of the body and documentElement are completely different:

FF19

Set overflow on the body: scroll is to set the browser's scroll bar, so that the body. clientHeight is always equal to the body. scrollHeight.

Body
ClientHeight: body. padding + body. height (css setting or content support );

OffsetHeight: clientHeight + body. border;

ScrollHeight = clientHeight.

DocumentElement
ClientHeight = window height-scrollbar. width.

OffsetHeight = body. offsetHeight + body. margin.

ScrollHeight = the height of the content (not related to the height style of the body), but the minimum value is documentElement. clientHeight.

Element
OffsetHeight = padding + border + height.

ClientHeight = padding + height-scrollbar. width.

ScrollHeight> = clientHeight

From the result analysis, FF considers that the minimum height of scrollHeight is clientHeight.

OffsetLeft = the distance from the upper left corner of the element border to the source of the window or to the top of the borderbox of offsetParent.

Chrome
Body
ClientHeight = body. padding + body. height (css setting or large content );

OffsetHeight = body. clientHeight + body. border;

ScrollHeight = body. padding + content height (not related to the height style), but the minimum value is documentElement. clientHeight.

DocumentElement
ClientHeight = window height-scroll bar height.

OffsetHeight = body. offsetHeight + body. margin;

ScrollHeight = the height of the content (not related to the height on the body), but the minimum value is documentElement. offsetHeight.

Element
OffsetHeight = padding + border + height.

ClientHeight = padding + height-scrollbar. width.

ScrollHeight> = clientHeight

Safari 5
Body
ClientHeight = body. padding + body. height (CSS or content supported );

OffsetHeight = clientHeight + border;

ScrollHeight = body. padding + content height (not related to the height style), but the minimum value is documentElement. clientHeight.

DocumentElement
ClientHeight = window Size-scroll bar size

OffsetHeight = body. offsetHeight + body. margin

ScrollHeight = the height of the content (not related to the height on the body), but the minimum value is documentElement. offsetHeight.

IE8
In IE8, the size of the scroll bar is 17 pixels.

Body
ClientHeight = body. padding + body. height (css setting or large content)

OffsetHeight = clientHeight + body. border

ScrollHeight = the height of the content (not related to the height on the body), but the minimum value is clientHeight.

DocumentElement
ClientHeight = window size (excluding the scroll bar)

OffsetHeight = clientHeight + scroll bar size + body. border

ScrollHeight = the height of the content (not related to the height on the body), but the minimum value is body. offsetHeight + margin.

Element
OffsetHeight = padding + border + height.

ClientHeight = padding + height-scrollbar. width.

ScrollHeight> = clientHeight

From the result analysis, FF considers that the minimum height of scrollHeight is clientHeight.

OffsetLeft = the distance from the upper left corner of the element border to the canvas origin or to the top of the borderbox of offsetParent.

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

Body
ClientHeight = body. padding + height (css setting or large content)-the scroll bar on the body.

OffsetHeight = clientHeight + size of the scroll bar + body. border.

ScrollHeight = the height of the content (not related to the height on the body ).

DocumentElement
ClientHeight = window size (irrelevant to the scroll bar)

OffsetHeight = clientHeight.

ScrollHeight = body. offsetHeight + border. margin

Element
OffsetHeight = padding + border + height.

ClientHeight = padding + height-scrollbar. width.

ScrollHeight = padding + content marginbox height

According to the result analysis, IE7 considers that scrollHeight can be smaller than clientHeight.

OffsetLeft = distance from the upper left corner of the element border box to the upper left corner of the borderbox of the parent container (not offsetParent.

IE6
In IE6, like IE7, the scroll bar set on the body is not the scroll bar of the window.

Body
ClientHeight = body. padding + body. height

OffsetHeight = body. clientHeight + body. border + size of the scroll bar on the body.

ScrollHeight = the height of the content (not related to the 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 considered to be consistent with other browsers.

ClientHeight = window size (after removing the size of the window scroll bar)

OffsetHeight = clientHeight + body. border

ScrollHeight = body. offsetHeight + body. margin

Element
OffsetHeight = padding + border + height.

ClientHeight = padding + height-scrollbar. width.

ScrollHeight = padding + content margin box height

According to the result analysis, IE6 considers that scrollHeight can be smaller than clientHeight.

Likewise

The description of clientWidth, offsetWidth, and scrollWidth is the same as above. You only need to change the height to the width.