JS gets the coordinate method of the element to document area documents

Get the elements in the page to the document area. Two methods for horizontal and vertical coordinates of documents and their comparison

JS control elements in the process of movement, for the page element coordinates position acquisition is often used, here the main summary of the two methods:

One: by stacking the element object and the Offsetleft/offsettop attribute of its offsetparent (if present) to achieve

When reading the third edition of the JavaScript Advanced Programming Dom section, you learned that to get an element's offset on the page, you need to add the offsetleft and offsettop of the element to the same attributes as its offsetparent, looping until the root element. So, to get the coordinates of the element to the document area, you can just keep getting offsetparent offsetleft/offsettop through the while loop until offsetparent = null.

JS Code:

The code is as follows:

Gets the coordinates of the element to the document area

function GetPosition (Element) {

var actualleft = Element.offsetleft,

Actualtop = Element.offsettop,

current = Element.offsetparent; Get the offsetparent of the element

Loop until the root element

while (current!== null) {

Actualleft + = Current.offsetleft;

Actualtop + = Current.offsettop;

current = Current.offsetparent;

}

Returns an object that contains the left and top coordinates

return {

Left:actualleft,

Top:actualtop

};

}

Example screenshot:

Firebug Test Results screenshot: (note: Other browsers have passed the test!)

Two: Through the Getboundingclientrect () method to achieve

The Getboundingclientrect method is used to get the position of the left, top, right, and bottom of an element in the page relative to the browser window window. Returns an object that has four properties: Top,left,right,bottom; This method was originally IE only, but ff3.0+ and opera9.5+ have supported this method, it can be said that in the acquisition of page element position efficiency has been greatly improved. In addition, the method avoids using a while loop, but rather gets the numeric value directly, which is better than the first method, especially on complex pages.

JS Code:

The code is as follows:

Gets the coordinates of the element to the document area

function GetPosition (Element) {

var dc = document,

rec = Element.getboundingclientrect (),

_x = Rec.left,//Get the element relative to the left and top coordinates of the browser window window

_y = Rec.top;

The addition of the scrolling distance to the HTML or BODY element is the coordinate position of the element relative to the document area documents

_x + + Dc.documentElement.scrollLeft | | Dc.body.scrollLeft;

_y + + Dc.documentElement.scrollTop | | Dc.body.scrollTop;

return {

Left: _x,

Top: _y

};

}

It is tested that the method obtains the same coordinate size as the first method for the document, and there are some differences for IE low version browsers.

Note: Remember to add the horizontal or vertical scrolling distance of HTML (ie excepted) or body (IE) elements!

Conclusion: The above has made an exposition of how to obtain the coordinates of the elements relative to the document area documents, if you encounter related problems, you can contact me or direct comments, in addition, the right coordinates and the lower coordinates of the bottom access to just left, The size of the top coordinate and the width of the element itself (elem.offsetwidth) and the height (elem.offsetheight) are added, and of course the offsetwidth, offsetheight property evaluates the inner margin, border of the element, So the best way to get it is through the Getboundingclientrect method. PS: To add, use this method to return the object's Right-left = element width; bottom-top = element height. You can get the width and height of the element itself without a border.