In-depth research on the various heights of browsers

Various heights are frequently encountered in the project. I will summarize them again today.

1) getboundingclientrect ()

This is a unique method in IE. This method obtains the position of an element on the left, top, right, and bottom of the page relative to the browser window. It returns an object, this object has a property: Top, left, right, bottom. If the scroll bar is rolled, the values of top and left may be negative, because it is relative to the visual window, is rolled in.

2) scrolltop

It indicates the height of the object to be rolled in. If it is a body object, it indicates the height of the scroll bar Volume, that is, the hidden height above the browser. If it is an object such as Div, it indicates that the scroll bar rolls out the height above the div.

3) offsetheight, offsetwidth

The actual height of the object includes the padding height border height. If it is used on the DIV object, it indicates the height of the DIV's edge frame.

If it is a body object, it indicates the height of the entire webpage, that is, the height of the visible area and the height of the body.

If the object is documentelement, this is equivalent to the body object.

4) scrollheight, scrollwidth

Indicates the height of the entire webpage.

5) clientheight, clientwidth

The height and width of the visual area of the webpage. The entire document model Doc. compatmode = 'background' is displayed on the body object,

Otherwise, it is used on the documentelement object, indicating the height and width of the visible window.

6) pagexoffset

The height of the page to be rolled out is the same as that of scrolltop, but different browsers support different pages.