_javascript tips for attributes of offset, client, and scroll in JavaScript

HTML elements have several attributes that begin with offset, client, and scroll, and are always confusing. See in the book to write down, to share to the needs of the small partners. These are mainly the following properties:

First group: Offsetwidth,offsetheight,offsetleft,offsettop,offsetparent

Group II: Clientwidth,clientheight,clientleft,clienttop

Group III: Scrollwidth,scrollheight,scrollleft,scrolltop

Detailed definitions are as follows:

The offsetwidth,offsetheight of the 1.1 HTML element returns its screen size in CSS pixels, including the border and the inner margin of the element, and does not contain the outer margin.

The 1.2 Offsetleft and offsettop properties return the x and y coordinates of the element. Typically, they return a value that is document coordinates. However, for descendant elements and some other elements (such as table cells) for a positioned element, these properties return coordinates that are relative to the ancestor element rather than the document.

The 1.3 offsetparent property specifies Offsetleft,offsettop relative to the parent element. If offsetparent is null, the return value of the latter both is document coordinates. So in general, it takes a loop to compute the position of element E with offsetleft and offsettop:

The document coordinate function for the calculated element
getelementposition (e) {
  var x=0,y=0;
  while (e!=null) {
    x +=e.offsetleft;
    Y +=e.offsettop;
    e=e.offsetparent; 
  }
  return {x:x, y:y};  
} 

The location of this method calculation is not always correct, and it is recommended that you use the built-in Getboundingclientrect () method.

The 2.1 clientwidth and clientheight are similar to the offsetwidth and Offsetheight properties, except that they contain no border size, only content and inner margins. Also, if a scroll bar is added between the browser's inside margin and the border, the return value of the clientwidth and clientheight does not contain a scroll bar. Note that for types <i>,<code> and <span> These inline elements, clientwidth and clientheight always return 0.

2.2 ClientLeft and ClientTop return the horizontal and vertical distances between the outer edge of the inner margin of an element and the outer edge of its border, usually equal to the border width of the left and top. However, if the element has scroll bars and the browser rotates the scroll bars to the left or top, they also contain the width of the scroll bar. For inline elements, they are always 0. Usually ClientLeft and clienttop are of little use.

3.1 ScrollWidth and Scollheight are the content areas of the element plus its inner margin plus the dimensions of any overflow content. These properties are equal to clientwidth and clientheight when the content exactly matches the content area and does not overflow. But when they overflow, they contain the overflow content, and the return value is larger than clientwidth and clientheight.

3.2 ScrollLeft and scrolltop the position of the scroll bar for the specified element. Note that scrollleft and scrolltop are writable by setting them to scroll the contents of the element (the HTML element does not have a Scrollto () method similar to the Window object).

Obj.offset[widthheighttopleft] Take the position of the control relative to the parent
Event.offset[xy] mouse to the coordinates of the control that triggers the event
Event.screen[xy] mouse relative to the screen coordinates　
Event.client[xy] Gets the size of the object scrolling in
Obj.scroll[widthheighttopleft relative to the page coordinates
Obj.client[widthheighttopleft] Gets the size of the visible area of the object

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Each browser has these properties, and some values may not be the same.

Write your own code, compare the results, you understand.