JS Get browser wide height, Web page width, screen height, mouse position, etc. (with picture description)

Web page Visible area width: document.body.clientWidth;
Web page Visible Area High: document.body.clientHeight;
(Click to view larger image)

Web page Visible Area width: document.body.offsetWidth (including the width of the edge);
Web page Visible Area High: document.body.offsetHeight (including the width of the edge);
(Click to view larger image)

There is no discovery that the difference between offsetwidth and ClientWidth, Offsetwidt is included with the scroll bar.

Page body Full text width: document.body.scrollWidth;
Page body Full text High: document.body.scrollHeight;
(Click to view larger image)
?
Regardless of whether DTDs are declared, in HTML,document.body.scrollHeight and Document.body.scrollWidth all represent the height of all content in the browser.
Here's a place to be aware of, compatibility notation document.documentElement.scrollHeight different manifestations in DTD declarations
For details, refer to
Http://www.cnblogs.com/blackwood/archive/2013/03/12/2955472.html

The page was rolled High: document.body.scrollTop;
The webpage is rolled away left: document.body.scrollLeft;
(Click to view larger image)

If the DTD declares a value that affects scrolltop, refer to
http://www.kixi.com.cn/blog/?p=2811

Browser location: window.screentop;
Browser's location left: window.screenleft;
(Click to view larger image)

In IE and FF browsers, use Screentop and Screeny,screenleft and Screenx respectively.
For details, please refer to:
browser window Position window screenleft, Screentop properties

High screen resolution: window.screen.height;
Width of screen resolution: Window.screen.width;
Screen available working area height: window.screen.availHeight;
Screen available working area width: window.screen.availWidth;
(Click to view larger image)

Window.screen.availHeight and Window.screen.availWidth indicate the height/width of the screen (except for the status bar at the bottom of the screen) pixels
Window.screen.heght and window.screen.width represent the full height and width of the screen (including the bottom toolbar)
You can view the online example, carefully experience!
JS calls the related properties of screen

Pagex The X-axis full-pixel displacement of the mouse point location (including the scrolling part)
pagey the y-axis of the mouse point location Full pixel Displacement (contains the scrolling part )
(Click to view larger image)

Online test # #http://jsfiddle.net/kixi/3heje/

offsetx The upper-left corner of the element that corresponds to the mouse position (0,0) and the pixel distance of the x-axis of the mouse point, IE, Chrome is active
OffsetY the upper-left corner of the element corresponding to the mouse position (0,0) is the pixel distance from the y-axis of the mouse point, IE, Chrome is active
(click to view larger image)

Online Example   http://jsfiddle.net/kixi/5el6m/