JavaScript-Get Height

Web page Visible area width: document.body.clientWidth
Web page Visible Area height: document.body.clientHeight
Web page Visible Area width: document.body.offsetWidth (including edge width)
Web page Visible Area High: document.body.offsetHeight (including edge height)
Page body Full text width: document.body.scrollWidth
Page body Full text High: Document.body.scrollHeight
Page is rolled away High: document.body.scrollTop
Webpage is rolled away left: document.body.scrollLeft
Page body part: Window.screentop
Page body part left: Window.screenleft
High screen resolution: Window.screen.height
Width of screen resolution: Window.screen.width
Screen available work area height: window.screen.availHeight
Screen available work area width: window.screen.availWidth

<script>functionGetInfo () {vars = ""= 5+ = "page visible area width:" +Document.body.clientWidth; s+ = "page visible Area High:" +Document.body.clientHeight; s+ = "page visible area width:" + document.body.offsetWidth + "(including Edge and scroll bar width)"; s+ = "page visible Area High:" + Document.body.offsetHeight + "(including edge width)"; s+ = "Page body Full text width:" +Document.body.scrollWidth; s+ = "page body full text High:" +Document.body.scrollHeight; s+ = "page is rolled high (FF):" +Document.body.scrollTop; s+ = "page is rolled high (ie):" +Document.documentElement.scrollTop; s+ = "page is rolled away left:" +Document.body.scrollLeft; s+ = "Page body part:" +Window.screentop; s+ = "Page body part left:" +Window.screenleft; s+ = "High screen resolution:" +Window.screen.height; s+ = "width of screen resolution:" +Window.screen.width; s+ = "screen usable workspace height:" +Window.screen.availHeight; s+ = "Screen available work area width:" +Window.screen.availWidth; s+ = "Your screen settings are" + window.screen.colorDepth + "bit color"; s+ = "Your screen settings" + Window.screen.deviceXDPI + "pixels/inch"; //alert (s);} getInfo (); </script>

In my local test:
Can be used under IE, FireFox, opera
Document.body.clientWidth
Document.body.clientHeight
Can be obtained, very simple, very convenient.
And in the company project:
Opera still uses
Document.body.clientWidth
Document.body.clientHeight
But IE and Firefox use
Document.documentElement.clientWidth
Document.documentElement.clientHeight
It's the standard of the "the".
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

If you add this line of markup to the page
In IE:
Document.body.clientWidth ==> Body Object width
Document.body.clientHeight ==> Body Object Height
Document.documentElement.clientWidth ==> Visible Area width
Document.documentElement.clientHeight ==> Visible Area height
In Firefox:
Document.body.clientWidth ==> Body Object width
Document.body.clientHeight ==> Body Object Height
Document.documentElement.clientWidth ==> Visible Area width
Document.documentElement.clientHeight ==> Visible Area height
?
In Opera:
Document.body.clientWidth ==> Visible Area width
Document.body.clientHeight ==> Visible Area height
Document.documentElement.clientWidth ==> The width of the page object (that is, the body object width plus the margin width)
Document.documentElement.clientHeight ==> Page Object height (i.e. body object height plus margin height)
And if there is no standard to define the
IE is:
Document.documentElement.clientWidth ==> 0
Document.documentElement.clientHeight ==> 0
Firefox is:
Document.documentElement.clientWidth ==> Page object width (i.e. body object width plus margin) Document.documentElement.clientHeight = = > Page object height (i.e. body object height plus margin)
Opera is:
Document.documentElement.clientWidth ==> Page object width (i.e. body object width plus margin) Document.documentElement.clientHeight = = > Page object height (i.e. body object height plus margin)
Really a troublesome thing, in fact, in terms of development, rather fewer objects and methods, do not use the latest standards to facilitate many AH.
Sometimes need to take the bottom of the page, you will use the Document.body.clientHeight, in the HTML standard (this sentence can be taken to the entire page height, regardless of the actual content of the body how high, for example, 1074*768 resolution, the page maximization, this high The degree is about 720, even if there is only one "Hello World" on the page, it still takes 720.
However, in XHTML, if there is only one row in the body body, then document.body.clientHeight can only take the height of that row, about 20px, then how do you want to take the entire page height, We'll use Document.documentElement.clientHeight to get it.
The reason: in HTML, the body is the root of the entire DOM, and in XHTML, the document is the root, the body is no longer the root, so take the body's properties, can not be taken to the entire page value.

The lines that distinguish the old and new standards are:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The former indicates that the page uses the old standard, which indicates that the page uses the new standard.

Summarize:
Using Document.documentElement.clientHeight instead of XHTML

JavaScript-Get height