Two Methods for js to get the (horizontal and vertical) coordinates of an element in the document area _ javascript skills

Obtain the horizontal and vertical coordinates of the document from the element in the page to the document area. It is often used to obtain the Coordinate Position of the element in the page when JavaScript controls the element movement, the following two methods are used to obtain and compare the horizontal and vertical coordinates of the document from the element to the document area on the page.
In the process of controlling element movement in js, it is often used to obtain the coordinate positions of page elements. Here we mainly summarize the following two methods:

I. Implemented by adding an element object and its offsetParent (if any) offsetLeft/offsetTop attribute
When reading the DOM section of the third edition of javascript advanced programming, I learned that to get the offset of an element on the page, I need to add the same properties of this element offsetLeft and offsetTop with offsetParent, continues until the root element. Therefore, to obtain the coordinates from the element to the document area, you only need to use the while loop to continuously obtain the offsetLeft/offsetTop of offsetParent until offsetParent = null.
Js Code:

The Code is as follows:

// Obtain the coordinates from the element to the document Area
Function getPosition (element ){
Var actualLeft = element. offsetLeft,
ActualTop = element. offsetTop,
Current = element. offsetParent; // gets the offsetParent of the element.
// Keep repeating until the root element
While (current! = Null ){
ActualLeft + = current. offsetLeft;
ActualTop + = current. offsetTop;
Current = current. offsetParent;
}
// Returns the object containing the left and top coordinates.
Return {
Left: actualLeft,
Top: actualTop
};
}

Example:

Firebug test results: (Note: other browsers have passed the test !)

II. Implementation through the getBoundingClientRect () method
The getBoundingClientRect method is used to obtain the position of an element on the left, top, right, and bottom of the page relative to the window of the browser. The returned object has four attributes: top, left, right, and bottom. This method was originally IE Only, but FF3.0 + and Opera9.5 + already support this method, it can be said that the efficiency of getting the page element location is greatly improved. In addition, this method avoids the use of A while LOOP, but directly obtains numerical values for implementation, which is better than the first method, especially on complex pages.
Js Code:

The Code is as follows:

// Obtain the coordinates from the element to the document Area
Function getPosition (element ){
Var dc = document,
Rec = element. getBoundingClientRect (),
_ X = rec. left, // obtain the left and upper coordinates of the element relative to the browser window.
_ Y = rec. top;
// The sum of the scrolling distance from the html or body element is the Coordinate Position of the element relative to the document area.
_ X + = dc.doc umentElement. scrollLeft | dc. body. scrollLeft;
_ Y + = dc.doc umentElement. scrollTop | dc. body. scrollTop;
Return {
Left: _ x,
Top: _ y
};
}

It is tested that this method is the same as the coordinate size of the element obtained in the first method as that in the document method. For earlier IE browsers, there are some differences.

Note: Remember to add the horizontal or vertical scrolling distance of html (except IE) or body (for IE) elements!
Conclusion: The preceding section describes how to obtain the Coordinate Position of an element relative to the document in the document area. If you have any questions, contact me or comment directly, for obtaining the right and bottom coordinates of the right coordinates, you only need to set the size of the left and top coordinates and the width of the element (elem. offsetWidth) and height (elem. offsetHeight) can be added. Of course, the offsetWidth and offsetHeight attributes will calculate the padding and border of the element. Therefore, the best way is to use the getBoundingClientRect method. Ps: This method is used to return the right-left = element width and bottom-top = element height of an object. You can obtain the width and height of elements without borders.