Two methods for js to obtain the (horizontal, vertical) coordinates of an element to the document area

Two methods for js to obtain the (horizontal, vertical) coordinates of an element to the document area_javascript skills

WBOY

Release： 2016-05-16 17:33:32

Original

1416 people have browsed it

Two methods of obtaining the horizontal and vertical coordinates of elements on the page to the document area document and their comparison
In the process of controlling the movement of elements in js, it is often used to obtain the coordinate position of page elements. Here we mainly summarize the following two methods One method:

One: Implemented by overlaying the offsetLeft/offsetTop properties of the element object and its offsetParent (if it exists)
Reading the JavaScript Advanced Programming Third Edition DOM section At that time, we learned that to get the offset of an element on the page, we need to add the offsetLeft and offsetTop of this element to the same attributes of its offsetParent, and loop all the way to the root element. Therefore, to get the coordinate position of the element to the document area, just use the while loop to continuously obtain the offsetLeft/offsetTop of offsetParent until offsetParent = null.
js code:

Copy code The code is as follows:

 
 // Get the coordinates of the element to the document area 
function getPosition(element) { 
var actualLeft = element.offsetLeft, 
actualTop = element.offsetTop, 
current = element.offsetParent; // Get the element offsetParent 
// Loop until the root element 
while (current !== null) { 
actualLeft = current.offsetLeft; 
actualTop = current.offsetTop; 
current = current.offsetParent ; 
} 
// Return an object containing left and top coordinates 
return { 
left: actualLeft, 
top: actualTop 
}; 
} 

Example screenshot:

Screenshot of test results under firebug: (Note: Other browsers have passed the test!)

Two: Implemented through the getBoundingClientRect() method
The getBoundingClientRect method is used to obtain the left, top, right and bottom positions of an element on the page relative to the browser window window. What is returned is an object with four attributes: top, left, right, bottom; this method was originally IE Only, but FF3.0 and Opera9.5 already support this method, which can be said to be useful in obtaining the page element position. The efficiency is greatly improved. In addition, this method avoids using a while loop, but directly obtains the numerical value to implement, which has better performance than the first method, especially on complex pages.
js code:

Copy code The code is as follows:

 
 // Get the coordinates of the element to the document area 
function getPosition(element){ 
var dc = document, 
rec = element.getBoundingClientRect(), 
_x = rec.left, // Get the element The left and top coordinates relative to the browser window 
_y = rec.top; 
// Added to the scrolling distance of the html or body element is the coordinate position of the element relative to the document area 
_x = dc .documentElement.scrollLeft || dc.body.scrollLeft; 
_y = dc.documentElement.scrollTop || dc.body.scrollTop; 
return { 
left: _x, 
top: _y 
}; 
} 

After testing, this method is the same as the first method to obtain the coordinate size of the element relative to the document. There are some differences for lower versions of IE browsers.

Note: Remember to add up the horizontal or vertical scrolling distance of the html (except IE) or body (for IE) elements!
Conclusion: The above has explained how to obtain the coordinate position of an element relative to the document area. If you encounter related problems, you can contact me or leave a comment directly. In addition, for the right coordinate right and the bottom coordinate bottom To obtain, just add the size of the left and top coordinates to the width (elem.offsetWidth) and height (elem.offsetHeight) of the element itself. Of course, the offsetWidth and offsetHeight attributes will calculate the padding and border of the element, so it is best The best way is to obtain it through the getBoundingClientRect method. ps: In addition, 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 borders.