Each HTML element has the following attributes

1. offset quantity

OfficeTheight/OffsetWidth: Expressouter size: Elemental content+interior border+border (excluding outer border)

OffsetLeft/Offsettop: Indicates the upper left corner of the element (outside the edge of the border) andPositioning

The distance from the upper left corner of

OfficeTParent element refers to the ancestral element of the nearest positioning of the element, which can be traced backward.

/** 
  * Get the coordinates of the element in the page (x, y) 
  * @param {Object} E 
  */ 
 Function GetelementPosition (E) { 
     var x = 0, y = 0; 
     While (e! = Null) { 
         x += e.offsetLeft; 
         y += e.offsettop; 
         e = e.offsetparent; 
     } 
     Return {x: x, y: y}; 
 }

2. ClientWidth Clientheight

ClientWidth/Clientheight: Used to describeInternal size: Element content+side spacing on both sides

innerWidth/innerHeight

Commonly used to obtain the height and width of the horizontal port

/** 
  * Get the size of the viewport 
  * Usage: 
  * var viewport = getViewPortsize (); 
  * viewport.width/viewport.height 
  * @param {Object} w 
  */ 
 function getViewPortsize (w) { 
     var w = w || window; 
     if (w.innerheight! = Null) { 
         Return {W: W.InnerWidth, H: W.Innerheight}; 
     } 
     var d = w.document; 
     if (document.compatmode == 'css1compat') {// Standard mode 
         Return { 
 width: d.documentelement.clientWidth, 
 height: d.documentelement.clientheight 
 }; 
     } 
     Return {w: d.body.clientWidth, h: d.body.clientheight}; 
 }

3. Rolling size

scrollheight/scrollwidth: The total height or width of the element content

scrollLLEFT/Scrolltop: refers to the position of the element rolling bar, they are(Pixels on the left/above the hidden content area)

Rolling bar at the browser window: Window objectPagexoffset and Pageyoffset, IE 8, and earlier versions can be obtained by scroll bar position through ScrollLeft and Scroltop properties

/** 
  * Get the scroll length 
  * Rolling strip roll down the hidden page length 
  * Common ScrollLeft and Scroltop 
  * @param {Object} w 
  */ 
 Function GetScrolLLLOFFSET (w) { 
     var w = w || window; 
     // Firefox 
     if (w.pagexoffset! = Null) { 
         Return {x: w.pagexoffset, y: w.pageyoffset}; 
     } 
     var d = w.document; 
     if (document.compatmode == 'css1compat') {// Standard mode 
         Return { 
 x: d.documentelement.scrolLeft, 
 y: d.documentelement.scrolltop 
 }; 
     } 
     // 
     Return {x: d.body.scrollleft, y: d.body.scroltop}; 
 }

4. event.screenX、event.screenY

The mouse is compared to the X, Y coordinate of the upper left corner of the user display screen. Both standard events and IE events define these two attributes

Summary:

Note: These attributes are manyRead only, every time they visit them, they need to be re -calculated

The height of the entire page: document.documentelement.scrollheight

Hidden page height on the content area: Window.pageyoffset/Document.documentelement.scrolltop

element.offsetHeight = element.clientHeight + borderLeft-width*2

Reference:http://www.cnblogs.com/dolphinX/archive/2012/11/19/2777756.html
HTML DOCUMENT window size and location