JS Mouse and object coordinate control attribute detailed analysis

  This article is mainly on the JS mouse and object coordinate control properties of a detailed analysis of the introduction, the need for friends can come to the reference, I hope to help you.

Offsettop gets the calculated top position of the object relative to the layout or the parent coordinates specified by the Offsetparent property.     Offsetleft Gets the left position of the calculation of the object relative to the layout or the parent coordinates specified by the Offsetparent property.   Offsetheight Gets the height of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property. IE, Opera think offsetheight = clientheight + scroll bar + border. NS, FF think offsetheight is the actual height of Web page content, can be less than clientheight.   Offsetwidth Gets the width of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property.   offsetparent gets a reference to the container object that defines the offsettop and Offsetleft properties of the object.   ClientHeight Gets the height of the object, without calculating any margins, borders, scroll bars, or fillers that might be applied to the object. We have no objections to clientheight, are considered to be the height of the content visual area, that is, the page browser can see the content of the height of the area, is generally the last tool bar below to the status bar above the area, and the content of the page is irrelevant.   ClientLeft Gets the distance between the Offsetleft property and the actual left side of the customer area.   ClientTop Gets the distance between the offsettop property and the actual top of the customer area.   ClientWidth Gets the width of the object, without calculating any margins, borders, scroll bars, or fillers that might be applied to the object.   Scroll Property   Scroll Sets or gets whether scrolling is turned off.   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 top of the visible content in the window.   ScrollWidth Gets the scrolling width of the object. event property x Sets or gets the X-pixel coordinates of the mouse pointer's position relative to the parent document.   ScreenX Sets or gets the x-coordinate of the mouse pointer position relative to the user's screen   OffsetX Sets or gets the x-coordinate of the mouse pointer's position relative to the object that triggered the event.   ClientX Sets or gets the x-coordinate of the mouse pointer's position relative to the client area of the window, where the customer area does not include controls and scrollbars for the window itself   we're talking about four browsers for Document.body ClientHeight, Offsetheight and ScrollHeight Explain, here is document.body, if it is an HTML control, then there is a difference.   These four browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox).   ClientHeight We have no objections to clientheight, are considered to be the height of the content visual area, that is, the page browser can see the content of the height of this area, is generally the last tool bar below the status bar above the area, Irrelevant to the content of the page.   Offsetheight IE, Opera think offsetheight = clientheight + scroll bar + border. NS, FF think offsetheight is the actual height of Web page content, can be less than clientheight.   ScrollHeight IE, Opera think ScrollHeight is the actual height of the content of the Web page, can be less than clientheight. NS, FF think ScrollHeight is a Web page content height, but the minimum value is clientheight. Simply put, clientheight is the height of this area of the content through the browser.   NS, FF think Offsetheight and scrollheight are Web content height, but when the content height of the Web page is less than equal to ClientHeight, scrollheight value is clientheight, and offset Height can be less than clientheight. IE, Opera think Offsetheight is the visual area clientheight scroll bar plus border. ScrollHeight is the actual height of the Web page content.   Empathy ClientWidth, offsetwidth, and scrollwidth have the same explanations as above, except that the height is changed to width.     ButIt is FF that differs in clientheight interpretations in different DOCTYPE, which is not explained in XHTML 1 trasitional. This problem does not exist in other browsers.   JS get page height code as follows: <script>  function GetInfo ()   {  var s = ";  s + +" page visible area wide: "+ document.b ody.clientwidth;  s + + page visible Area High: "+ document.body.clientheight;  S + +" page visible area wide: "+ Document.body.offsetWidth +" (including edge and scroll bar width) ";  s + +" page visible Area High: "+ Document.body.offsetHeight +" (including edge width) ";  s + +" page body full text width: "+ Document.body.sc rollwidth;  s + + "page body full text High:" + document.body.scrollheight;  S + + "page is rolled high (FF):" + document.body.scrollTop;   S + + "Web page was rolled high (ie):" + document.documentelement.scrolltop;  S + + "page was rolled away to the left:" + document.body.scrollleft;  S + + page body part: "+ window.screentop;  S + +" page body part left: "+ window.screenleft;  s + =" high screen resolution: "+ Window.screen.heigh t;  S + + screen resolution width: "+ window.screen.width;  S + +" screen available workspace height: "+ window.screen.availheight;  S + +" screen available work area width Degrees: "+ window.screen.availwidth;  S + +" your screen setting is "+ Window.screen.colordepth + "bit color";  s + + "your screen settings" + Window.screen.deviceXDPI + "pixel/inch"; //alert (s); }  ();   </script>    In my local test:  in IE, FireFox, opera can use   document.body.clientwidth  document.body.clientheight  can be obtained, very simple, very convenient.   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 <!.   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    :  document.body.clientWidth ==> in Firefox Body Object width   document.body.clientHeight==> Body Object Height   document.documentElement.clientWidth ==> visible area width   Document.documentElement.clientHeight ==> Visible Area height    :  document.body.clientWidth ==> in Opera 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, the body object height plus margin high)     If the standard of the:  is not defined, then     IE is the document.documentElement.clientWidth ==> 0  Document.documentElement.clientHeight ==> 0    Firefox for:  document.documentElement.clientWidth = > Page object width (that is, the body object width plus margin width) document.documentElement.clientHeight ==> Page Object height (that is, the body object height plus margin high)     Opera for:  Document.documentElement.clientWidth ==> Page object width (that is, the body object width plus margin width) document.documentElement.clientHeight ==> Page Object height (that is, the body object height 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.