Four browsers explaining the ClientHeight, offsetheight, and scrollheight of Document.body

compatibility, especially the compatibility of these several things is very complex, for the sake of simplicity, suggest reading again talk about Document.documentelement and Document.body scrollwidth, offsetwidth, clientwidth This article.

Here we talk about the document.body of the four browsers to the ClientHeight, offsetheight, and ScrollHeight, which is document.body, and if it's an HTML control, it's different.

These four browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox), respectively.

The important note at the end of the text is more important, please note.

Read the comments, many friends, the description of me is still very confused, so I did the following figure, to help understand.

From the diagram, we can see a browser window , the window was deliberately dragged down, so that the formation of the scroll bar, so that the content on the top of the page is hidden in the window , the content of the bottom of the page is hidden under the window .

ClientHeight, offsetheight and scrollheight can be explained roughly (please read the following carefully): the height of the white in the clientheight figure. Offsetheight, scrollheight the White + upper shadow part + shaded section, that is, the height of the Web content. By the way, the Upper shadow part (the top gradient black) is scrolltop.

ClientHeight

Everyone has no objection to the clientheight, are considered to be the height of the content viewable area, that is, the page browser can see the content of the height of the area, is generally the last toolbar below the status bar above the area, not related to the content of the page.

Offsetheight IE, Opera thinks offsetheight = clientheight + scroll bar + border. NS, FF think offsetheight is the actual height of the Web content, can be less than clientheight. In other words, the actual height of the page content is less than clientheight, offsetheight returns the actual height of the Web page.

ScrollHeight IE, Opera think ScrollHeight is the actual height of the Web content, can be less than clientheight. NS, FF thinks that scrollheight is the height of the Web content, but the minimum value is clientheight. In other words, when the content of the Web page is less than clientheight, ScrollHeight returns clientheight.

To put it simply

ClientHeight is the height of the area through which the content is viewed by the browser.

NS, FF think Offsetheight and scrollheight are Web content height, but when the content height of the page is less than or equal to ClientHeight, scrollheight value is clientheight, and offsetheight Can be less than clientheight.

IE, Opera thinks offsetheight is the visible area clientheight scroll bar and border. ScrollHeight is the actual height of the Web content.

Similarly

The explanations of clientwidth, offsetwidth and ScrollWidth are the same as above, just change the height to width.

Important Notes

The above is in the absence of a specified DOCTYPE, if the DOCTYPE is specified as XHTML, such as: DTD XHTML 1.0 Transitional, the meaning will be different, in this case, the three values are the same value, All represent the actual height of the content (and don't care how high the window is).

Again, when I wrote this, the Chrome browser didn't come out, and then I tested chrome when I specified DOCTYPE as XHTML, true BT, which has the same clientheight and offsetheight values, indicating the actual height of the content. (And don't care how high the window is), ScrollHeight is another set of not know what things, in short it and IE, Firefox is different.

Ok, come back, if you want to specify the DOCTYPE as XHTML, to the beginning of the article to explain (that is, clientheight, offsetheight, scrollheight the meaning of different) to apply, how to do it. The answer is: Apply Document.body and document.documentelement together, such as: Document.documentElement.scrollLeft | | Document.body.scrollLeft (generally document.documentelement written in front), similar applications see: http://www.cnblogs.com/wang726zq/archive/ 2012/05/10/2494256.html.