jQuery x y координаты документа объекта DOM

Мне нужно получить координаты X, Y (относительно верхней / левой части документа) для элемента DOM. Я не могу найти какие-либо плагины или свойство или метод jQuery, которые могут дать их мне. Я могу получить верхнюю и левую часть элемента DOM, но это может быть относительно его текущего контейнера / родителя или документа.

вопрос задан 16.06.2009
DMCS
28842 репутация

3 ответов


  • 90 рейтинг

    вы можете использовать Размеры плагин [устарело. , , включены в JQuery 1. 3. 2+]

    смещение ()
    Получите текущее смещение первого сопоставленного элемента в пикселях относительно документа 3894676001 .

    position ()
    Получает верхнюю и левую позиции элемента относительно его родительского смещения .

    зная это, тогда легко. , , (используя мой маленький svg проект в качестве примера , стр. )

    var x = $("#wrapper2").offset().left;
    var y = $("#wrapper2").offset().top;
    
    console.log('x: ' + x + ' y: ' + y);
    

    вывод:

    x: 53 y: 177
    

    надеюсь, это поможет вам.

    вот изображение смещения () и позиции ()

    с использованием XRay

    alt text

    с использованием Веб-разработчик панель инструментов

    alt text

    ответ дан balexandre, с репутацией 51765, 16.06.2009
  • 6 рейтинг

    Мое решение - плагин с «обходными путями»: + D. Но работает!

    jQuery.fn.getPos = function(){
            var o = this[0];
            var left = 0, top = 0, parentNode = null, offsetParent = null;
            offsetParent = o.offsetParent;
            var original = o;
            var el = o;
            while (el.parentNode != null) {
                el = el.parentNode;
                if (el.offsetParent != null) {
                    var considerScroll = true;
                    if (window.opera) {
                        if (el == original.parentNode || el.nodeName == "TR") {
                            considerScroll = false;
                        }
                    }
                    if (considerScroll) {
                        if (el.scrollTop && el.scrollTop > 0) {
                            top -= el.scrollTop;
                        }
                        if (el.scrollLeft && el.scrollLeft > 0) {
                            left -= el.scrollLeft;
                        }
                    }
                }            
                if (el == offsetParent) {
                    left += o.offsetLeft;
                    if (el.clientLeft && el.nodeName != "TABLE") {
                        left += el.clientLeft;
                    }
                    top += o.offsetTop;
                    if (el.clientTop && el.nodeName != "TABLE") {
                        top += el.clientTop;
                    }
                    o = el;
                    if (o.offsetParent == null) {
                        if (o.offsetLeft) {
                            left += o.offsetLeft;
                        }
                        if (o.offsetTop) {
                            top += o.offsetTop;
                        }
                    }
                    offsetParent = o.offsetParent;
                }
            }
            return {
                left: left,
                top: top
            };
        };
    

    Использование:

    var p = $("#wrapper2").getPos();
    alert("top:"+p.top+"; left:"+p.left);
    
    ответ дан EderBaum, с репутацией 104, 25.01.2010
  • 4 рейтинг

    Функция смещения сделает это за вас.

    Вот пример, который они дают:

    var p = $("p:last");
    var offset = p.offset();
    p.html( "left: " + offset.left + ", top: " + offset.top );
    
    ответ дан Jeff Davis, с репутацией 3202, 16.06.2009