getting the X and Y coordinates for a div element

Question

I've been trying to make a javascript to get a X and Y coordinates of a div element. After some trying around I have come up with some numbers but I'm not sure how to validate the exact location of them(the script returns the X as 168 and Y as 258) I'm running the script with a screen resolution of 1280 x 800. This is the script I use to get this result:

function get_x(div) {
    var getY;
    var element = document.getElementById("" + div).offsetHeight;
    var get_center_screen = screen.width / 2;

    document.getElementById("span_x").innerHTML = element;
    return getX;
}

function get_y(div) {
    var getY;
    var element = document.getElementById("" + div).offsetWidth;
    var get_center_screen = screen.height / 2;

    document.getElementById("span_y").innerHTML = element;
    return getY;
}

Now the question is. Would it be reasonable to assume that these are accurate coordinates returned by the function or is there an easy to to just spawn a little something on that location to see what exactly it is?

And finally how would I go about making this div element move? I know I should use a mousedown event handler and a while to keep moving the element but yeah any tips/hints are greatly appreciated my biggest concern is to how to get that while loop running.

You shouldn't ask two questions in one. Ask the drag-n-drop question separately. — katspaugh, May 04 '12 at 08:52

katspaugh · Answer 1 · 2013-08-01T05:48:11.323

46

By far, the easiest way to get the absolute screen position of an element is getBoundingClientRect.

var element = document.getElementById('some-id');
var position = element.getBoundingClientRect();
var x = position.left;
var y = position.top;
// Et voilà!

Keep in mind, though, that the coordinates don’t include the document scroll offset.

edited Aug 01 '13 at 05:48

answered May 04 '12 at 08:47

katspaugh

17,449
11
66
103

It seems getBoundingClientRect was introduced in Firefox 3: https://developer.mozilla.org/en/DOM/element.getBoundingClientRect - I've always used the quirksmode method. It's more compatible :) – sole May 04 '12 at 13:27

score 12 · Accepted Answer · edited Aug 01 '13 at 05:52

Here a simple way to get various information regarding the position of a html element:

        var my_div = document.getElementById('my_div_id');
        var box = { left: 0, top: 0 };
        try {
            box = my_div.getBoundingClientRect();
        } 
        catch(e) 
        {}

        var doc = document,
            docElem = doc.documentElement,
            body = document.body,
            win = window,
            clientTop  = docElem.clientTop  || body.clientTop  || 0,
            clientLeft = docElem.clientLeft || body.clientLeft || 0,
            scrollTop  = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop  || body.scrollTop,
            scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
            top  = box.top  + scrollTop  - clientTop,
            left = box.left + scrollLeft - clientLeft;

score 2 · Answer 3 · answered May 04 '12 at 08:36

2

You need to find the position using the parent's position too. There's a very good tutorial here: http://www.quirksmode.org/js/findpos.html

answered May 04 '12 at 08:36

sole

2,057
2
17
18

score 0 · Answer 4 · answered May 04 '12 at 08:39

0

I think you could use jQuery .offset() http://api.jquery.com/offset/

answered May 04 '12 at 08:39

snies

3,461
1
22
19

8

The question isn't tagged jQuery! – May 04 '12 at 08:41

score 0 · Answer 5 · answered Dec 03 '17 at 12:47

Given the element...

<div id="abc" style="position:absolute; top:350px; left:190px;">Some text</div>

If the element is in the main document you can get the DIV's coordinates with...

 var X=window.getComputedStyle(abc,null).getPropertyValue('left');

 var Y=window.getComputedStyle(abc,null).getPropertyValue('top');

If the element is in an iframe you can get the DIV's coordinates with...

 var X=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('left');

 var Y=FrameID.contentWindow.getComputedStyle(abc,null).getPropertyValue('top');

NB: The returned values should be in the format "190px" and "350px".

getting the X and Y coordinates for a div element

5 Answers5

Linked