JS Get page Height program code

First of all, to popularize knowledge

Page visible area wide: document.body.clientWidth

Page visible Area High: document.body.clientHeight

Web page Visible area wide: document.body.offsetWidth (including edge width)

Page visible Area High: document.body.offsetHeight (including edge width)

Page body Full text width: document.body.scrollWidth

The full text of the Web page High: document.body.scrollHeight

Web pages are rolled up high: Document.body.scrollTop

Pages were rolled away to the left: Document.body.scrollLeft

Web 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 Workspace height: window.screen.availHeight

Screen available workspace width: window.screen.availWidth

When writing JS often need to get a variety of page height, width, this article shares the common gain height and height of the attributes

code is as follows

copy code

<script language= "JavaScript" > var s = ""; S = "RN Web page visible area wide:" document.body.clientwidth; S = "RN Web page Visible Area High:" Document.body.clientheight; The S = RN Web page is wide visible: "Document.body.offsetwidth" (including edges and scroll bar widths); S = RN Web page visible Area High: "Document.body.offsetheight" (including edge width); S = "RN Web page full text width:" document.body.scrollwidth; S = "RN Web page full text High:" Document.body.scrollheight; The s = "RN Web page is rolled away High:" DOCUMENT.BODY.SCROLLTOP; The s = "RN Web page is rolled away left:" Document.body.scrollleft; S = "RN Web page body section:" Window.screentop; S = "RN Web page body part left:" Window.screenleft; S = "high screen resolution of RN:" Window.screen.height; S = "The wide screen resolution of RN:" Window.screen.width; S = RN screen available workspace height: window.screen.availheight; S = RN screen available workspace width: window.screen.availwidth; The s = "rn your screen setting is" window.screen.colordepth "bit color"; S = "rn your screen setting" window.screen.devicexdpi "pixel/inch"; Alert (s); </script>

In my local test:
In IE, FireFox, opera can be used

The code is as follows	Copy Code
Document.body.clientWidth Document.body.clientHeight

Can be obtained, very simple, very convenient.
And in the company project:
Opera still uses

The code is as follows	Copy Code
Document.body.clientWidth Document.body.clientHeight

But IE and Firefox use

The code is as follows	Copy Code
Document.documentElement.clientWidth Document.documentElement.clientHeight

It's the standard of the consortium.
<! 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

The code is as follows

Copy Code

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 ==> Page Object width (that is, the body object width plus margin width) Document.documentElement.clientHeight ==> Page Object height (that is, height of the body object plus margin high) If the standard of the consortium is not defined, the IE is: Document.documentElement.clientWidth ==> 0 Document.documentElement.clientHeight ==> 0 Firefox is: Document.documentElement.clientWidth ==> Page Object width (that is, the body object width plus margin width) Document.documentElement.clientHeight = = > Height of the Page object (that is, the height of the body object plus margin high) Opera is: Document.documentElement.clientWidth ==> Page Object width (that is, the body object width plus margin width) Document.documentElement.clientHeight = = > Height of the Page object (that is, the height of the body object plus margin high)

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 Document.body.clientHeight, in the HTML standard (this sentence can be taken to the height of the entire page, regardless of the actual content of the body how high, for example, 1074*768 resolution, the page to maximize, this high The degree is about 720, even if the page is only a "Hello World", still take to 720.

But in XHTML, if there is only one row in the body, then document.body.clientHeight can only take the height of that line, about 20px, and then how to get to the height of the entire page, We'll use Document.documentElement.clientHeight to get it.

The reason is: 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 property, you can not take 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:
In XHTML, replace with Document.documentElement.clientHeight
Document.body.clientHeight