JavaScript Capture window (container) size and position parameters enumerated and brief description _ Basics

JavaScript gets the size and position of a window (container) a series of things that are more and easily confusing, here are enumerated and briefly described below:

Property Method Description：
ClientX the horizontal coordinate of the relative document;
ClientY the vertical coordinate of the relative document;
OffsetX relative to the horizontal coordinate of the container;
The vertical coordinates of the OffsetY relative to the container;
ScrollWidth Gets the scrolling width of the object;
ScrollHeight Gets the scrolling height of the object;
ScrollLeft Sets or gets the left distance between the left edge of the object and the current visible content in the window;
ScrollTop Sets or gets the distance between the top of the object and the topmost part of the visible content in the window;
Offsetwidth Gets the width of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property;
Offsetheight Gets the height of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property;
Offsetleft gets the left position of the computation of the object relative to the layout or the parent coordinates specified by the Offsetparent property;
Offsettop gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property.

JavaScript gets screen, window size method：
High screen resolution: window.screen.height;
Width of screen resolution: Window.screen.width;
Screen available workspace height (does not include taskbar): Window.screen.availHeight;
Screen Available workspace width (does not include taskbar): Window.screen.availWidth;
Web page visible area wide (does not contain scroll bars and borders): Document.body.clientWidth;
High page visible area (without scroll bars and borders): Document.body.clientHeight;
Web page visible area wide (contains scroll bars and borders): Document.body.offsetWidth;
High page visible area (contains scroll bars and borders): Document.body.offsetHeight;
Page body width: document.body.scrollWidth;
High content of Web page: document.body.scrollHeight;
The Web page is rolled up high: document.body.scrollTop;
The pages are rolled away left: document.body.scrollLeft;
On the body part of the Web page (the distance from the left edge of the screen on the leftmost page body): window.screentop;
Page body section left (the top of the page body is the distance from the top edge of the screen): Window.screenleft.

Note: Sometimes a value cannot be taken because the HTML file has a document type in the header：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
At this point, Document.body.scrollTop and Document.body.scrollLeft are changed to: Document.documentElement.scrollTop And Document.documentElement.scrollLeft can, Document.body.clientWidth and Document.body.clientHeight will also be changed to: document.documentelement . clientwidth and Document.documentElement.clientHeight

Of course there are omissions or no clear place, we can add, discuss or Baidu Baidu, together with progress! ye~