CODEWITHSUNDEEP
javascripthtmldomgetelementbyid
Nudier Mena
Nudier Mena

Reputation: 3274

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

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.

Upvotes: 9

Views: 37366

Answers (3)

Flavio Cysne
Flavio Cysne

Reputation: 1456

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.

Upvotes: 1

jakubiszon
jakubiszon

Reputation: 3573

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

Upvotes: 1

MaxArt
MaxArt

Reputation: 22617

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).

Upvotes: 26

Related Questions