JS Get page Height program code

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.