Document.body.clientWidth-page visible area wide
Document.body.clientHeight-High page visible area
Document.body.offsetWidth-the width of the visible area of the page, including the edges and the width of the scroll bar
Document.body.offsetHeight-High page visible area, including the edge and scroll bar high [ff,chrom is the entire page high, IE Opera under normal]
Document.body.scrollWidth-Total Page width
Document.body.scrollHeight-Total Page height
Document.body.scrollTop-when there is a scroll bar, drag down the scroll bar, the top does not show that part of the height
Document.body.scrollLeft-Ditto
Window.innerheight-Internal height of the browser window
Window.innerwidth-The internal width of the browser window
Window.screentop-Web page on the body section [Top of the page document distance from the top of the screen, but FF does not support, Chrom,ie,opera performance are different, use caution]
Window.screenleft-page body part left [the leftmost distance of the page document from the screen, but FF does not support, Chrom,ie,opera performance is different, cautious use]
Window.screen.height-height of screen resolution
Window.screen.width-width of screen resolution
Window.screen.availHeight-Available Workspace height [entire screen but not included below taskbar]
Window.screen.availWidth-Available Workspace width [width of the entire screen]
Window.screen.clorDepth-screen color, commonly used 16, 32 bits, etc.
Window.screen.deviceXDPI-screen pixel/inch "ie support, others not supported"
How JavaScript Gets the page width and height
<script> function GetInfo () {var s = "";
S + + "Web page visible area wide:" + document.body.clientWidth;
s + + "page visible Area High:" + document.body.clientHeight;
S + + "Web page visible area wide:" + Document.body.offsetWidth + "(including the edge and the width of the scroll bar)";
s + + "page visible Area High:" + Document.body.offsetHeight + "(including the edge of the width)";
s + + "page text full text width:" + document.body.scrollWidth;
s + + "page full text High:" + document.body.scrollHeight;
S + + "Web page is rolled high (FF):" + document.body.scrollTop;
S + + "Web page is rolled high (ie):" + document.documentElement.scrollTop;
S + + "The page is rolled away to the left:" + document.body.scrollLeft;
s + + "page body part:" + window.screentop;
s + + "page body part left:" + window.screenleft;
S + + "screen resolution of High:" + window.screen.height;
S + + "screen resolution width:" + window.screen.width;
S + + screen available work area height: + window.screen.availHeight;
s = = "screen available working area width: + window.screen.availWidth;"
S + + "your screen setting is" + window.screen.colorDepth + "bit color";
S + + "your screen settings" + Window.screen.deviceXDPI + "pixel/inch";
alert (s);
} getInfo (); </script>
In my local test:
In IE, FireFox, opera can be used
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 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
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 ==> the height of the page object (that is, the 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:
Copy Code code as follows:
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)
Opera is:
Copy Code code as follows:
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)
The above mentioned is the entire content of this article, I hope you can enjoy.