using javascript to find position of DOM elements

Question

I want to inspect spatial organization of elements on a web page.

Could I get sample code and pointers to resources.

Thanks.

Answer 1

If you want good, modular code that you can read and easily extract just the bits you want, try David Mark's MyLibrary (which you use to build your library).

I find libraries like jQuery are so intricately bound up in themselves and dependant on their own functionality that trying to track down all the functions and re-mapping of properties is an exercise in frustration. On the other hand, MyLibrary is written to be very modular from the start and provides better cross-browser features.

Answer 2

Here you go:

function position( elem ) {
    var left = 0,
        top = 0;

    do {
        left += elem.offsetLeft;
        top += elem.offsetTop;
    } while ( elem = elem.offsetParent );

    return [ left, top ];
}

Live demo: http://jsfiddle.net/dDyZF/2/

Answer 3

You didn't ask for jQuery, but you might want to check out the jQuery dimensions plugin.