How get real positions of element in javascript

dom, javascript

Solution

You don't have to use offsets. Use the modern `getBoundingClientRect` function:

function getPosition( element ) {
    var rect = element.getBoundingClientRect();
    return {
        x: rect.left,
        y: rect.top
    };
}

You could then use the above function like this:

var element = document.getElementById( 'myElement' );
var pos = getPosition( el );

// Alert position in X axis
alert( pos.x );

// Alert position in Y axis
alert( pos.y );

Works in all browsers

EDIT: If you want the position of the element with respect to page scroll, just add `document.body.scrollTop` to Y position and `document.body.scrollLeft` to X position.

Problem

I want to get real X and Y position of my styled elements in javascript ( or jquery short code). ``` var offset = obj.offset(); ox=offset['left']; oy=offset['top']; px=parseInt(obj.css('padding-left')); // padding left py=parseInt(obj.css('padding-top')); // padding top bx=parseInt(obj.css('border-width') ); // stroke value ox=ox+px+bx; oy=oy+py+bx; ``` But this codes sometimes not work.. when scrool top or scroll left change im not get real position :( please help me..

Original source