Geek asks and answers

Get div position (top) in javascript?

One div I sets the height in css with top:-26px;. I have other divs other places where I would like to align with this div. I notice that in the jquery letter .css('top')my css gets me, not the y coordinate of the div. How to get absolute x, y position using javascript?

+5
source share
6 answers

I will give you a vanilla solution .. don’t complain .. add [0] to your element and it is fixed !: P hope this helps.

function getOffset( el ) {
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;
+17
source

you can use jQuery(element).offset().top

Hope this helps.

+11
source

:

function getElementPosition(id) {
    var offsetTrail = document.getElementById(id);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }

    return {
        left: offsetLeft,
        top: offsetTop
    };
}​

left top.

JQuery, offset() :

var pos = $("#element").offset();
console.log(pos.left)
console.log(pos.top)
+3

Cross browser is safe until IE 8, maybe even 7 or 6:

function offset(el) {
    var rect = el.getBoundingClientRect(),
    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
var offsetEl = offset(document.getElementById('some_id'));
console.log(offsetEl.left, offsetEl.top);

Short and fast and no jQuery required.

+3
source

With standard JavaScript:

var elem=document.getElementById("elemID");
var top=elem.offsetTop;
var left=elem.offsetLeft;

Using jQuery:

var top=$("#elemID").offset().top;
var left=$("#elemID").offset().left;
0
source

Use jQuery (element) .offset ()

Hope this helps.

for instance

var elementPosition = jQuery(element).offset();
var elementTopPositon = elementPosition.top;
0
source

More articles:


All Articles