JavaScript Learning Location Acquisition

First, get the browser size and location

See also blog: http://www.cnblogs.com/bobodeboke/p/4653920.html

Second, get the size and position of the element

Method one, using the Offsetxxx property

1) Offsetheight: The element occupies space vertically, including the inner margin, and the upper and lower border.

2) Offsetwidth: Elements occupy space horizontally, including inner margin, left and right border.

Note: If you do not want to include the border department, you can use clientwidth and clientheight;

3) Offsetleft: The pixel distance between the left bounding box of the element and the left inner border of the containing element (in the offsetparent reference).

4) OffsetTop: The pixel distance between the Sisu border of the element and the inside border of the containing element (offsetparent reference).

Depending on offsetleft and offsettop, you can get the offset of the element on the page by backtracking up to the root element:

//gets the left offset of the element on the pagefunction Getelementleft (element) {varacturalleft=Element.offsetleft; varCurrent=element.offsetparent;  while(current!=NULL) {Acturalleft+=Current.offsetleft; Current=current.offsetparent; }    returnActuralleft;}//gets the offset of the element on the pagefunction Getelementtop (element) {varacturaltop=Element.offsettop; varCurrent=element.offsetparent;  while(current!=NULL) {Acturaltop+=Current.offsettop; Current=current.offsetparent; }    returnacturaltop;}

Method two, using Getboundingclientrect () method

The method returns a rectangular object that contains four properties of left,top,right and bottom. Where the difference between right and left is equal to the value of offsetwidth, the bottom and top difference and the value of offsetheight are equal. The left and top properties are roughly equal to the front getelementtop and Getelementleft

(ie thinks the upper-left corner of the document is (2,2), others including IE9 think the upper-left corner is (0,0))

Three, the determination of the size and position of the rolling element

1) ScrollHeight: If there is no scrollbar, the total height of the element (also included in the height of the rolling collapse department)

2) ScrollWidth: If there is no scroll pick, the total width of the element

3) ScrollLeft: The number of pixels hidden in the left-hand area by the scroll bar. You can change the scrolling position of an element by setting this property

4) ScrollTop: The number of pixels hidden by the scrollbar in the upper side area. You can change the scrolling position of an element by setting this property

JavaScript Learning Location Acquisition