Common coordinate properties in JavaScript offset, scroll, client

Today in the Learning JS when the problem is more easily confused, so I drew a simple diagram, and with the JS console inside the output test, easy to understand. 1. In Document Object：

scrollwidth/height: Gets the scrolling width of the object ( the width of the scroll bar can be scrolled, which is equivalent to the total width of the entire page--full width of the page body)

scrollleft/top: Sets or gets the distance between the leftmost edge of the object's left border and the currently visible content in the window (when the page scrolls to the right with the scroll bar, the width of the page that is hidden on the left side of the scrollbar---page is rolled to the left)

  2, in the Node object with:   Offsetleft/top: Gets the object relative to the layout (the CSS does not have a location, the OffsetParent value is computed for the root element) or the left position of the calculated parent coordinate specified by the OffsetParent property (when CSS is positioned, The distance from the current object relative to the offsetparent element)  Offsetwidth/height ( Width+padding+border)gets the width of the current object. Style.width is also the width of the current object (Width+padding+border). difference: 1) style.width return value in addition to the number of units px;2) If the width of the object is set to a percentage width, whether the page becomes larger or smaller,Style.width returns this percentage, while offsetwidth returns the width value of the object in different pages instead of the percent value;3) If the width style is not specified for the HTML element, Style.width returns an empty string;  offsetleft:the distance from the current object to the left of its parent layer. it cannot be assigned a value. Set the distance to the left of the upper layer of the object, using the Style.left property. Style.left the distance from the current object to the left of its parent layer. difference: 1) Style.left return value in addition to the number of units px;2) If the distance from the object to the left of its upper layer is set to a percentage,Style.left returns this percentage, while Offsetleft returns the value of the distance to the left of its upper layer;3) If the left style is not specified for the HTML element, Style.left returns an empty string;Note: If the upper layer is the body, because IE, ff to padding, margin interpretation is not the same, so make clear that the treatment is not the following differences are not established. IE 1) If the upper layer of div is body, and there is a div between the div and the body, such as Body->div->divo;divo's Offsettop=div padding+margin+boder;2) If the upper layer of div is body, such as Body>divo;divo's Offsettop=div padding+margin+boder;This Divo offsettop=divo margin >body.padding is Divo margin, otherwise body.padding who is big? FF Both of the above: offsettop=margin+padding;(the body default padding in IE and FF is 10) in IE6.0 FF3.6.13  clientwidth/height: gets the width of the object's visible content, excluding scroll bars, excluding borders;   Clientleft/top:gets the border width of the object    3. Used in the event:

Event.clientx horizontal coordinates of relative documents

Event.clienty vertical coordinates of relative documents

event.offsetx Horizontal coordinates relative to the containerevent.offsety The vertical coordinate of the relative container  4, the screen:Window.screentop The body part of the Web pageWindow.screenlfet page body part left window.screen.height Screen Resolution law is highWindow.screen.left The width of the screen resolution law window.screen.availHeight The height of the available workspaces for the screenWindow.screen.availWidth the width of the available workspaces for the screen Document.documentElement.scrollTop The vertical scrolling value Web page Visible area width: document.body.clientWidth;Web page Visible Area High: document.body.clientHeight;
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);
page Body Full text width: document.body.scrollWidth;
page Body Full text High: document.body.scrollHeight;
The page was rolled High: document.body.scrollTop;
the webpage is rolled away left: document.body.scrollLeft;
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 working area height: window.screen.availHeight;
screen Available working area width: window.screen.availWidth;

Common coordinate properties in JavaScript offset, scroll, client