How to grab the x, y position of html elements with javascript

Question

I have in my html document several div elements with certain css class and want to get x, y position of those elements, thanks in advance.

Solution 1

Use getBoundingClientRect: http://ejohn.org/blog/getboundingclientrect-is-awesome/

For example:

var div = document.getElementById("yourDiv");
var rect = div.getBoundingClientRect();
alert("Coordinates: " + rect.left + "px, " + rect.top + "px");

Remember that getBoundingClientRect gives the coordinates relative to the current viewport, which means that if you want to know the coordinates relative to the document.body, you have to add the horizontal and vertical scroll amounts (document.documentElement.scrollLeft or document.body.scrollLeft for Firefox, and .scrollTop of course).

Solution 2

If I understand, you want to do this http://www.quirksmode.org/js/findpos.html

Solution 3

The examples bellow show how to retrieve the ClientRect of an HTML Element

# first tag link of this page
document.getElementsByClassName('post-taglist')[0].children[0].getClientRects()[0]
# question div
document.getElementById('question').getClientRects()[0]

With it you have acces to right, top, height, width, left and bottom attributes.