Получить позицию (X, Y) HTML-элемента - PullRequest
Новая
       112

Получить позицию (X, Y) HTML-элемента

1293 голосов
/ 14 января 2009

Я хочу знать, как получить положение X и Y таких элементов HTML, как img и div в JavaScript.

Ответы [ 25 ]

1564 голосов
/ 09 июля 2012

Правильный подход заключается в использовании element.getBoundingClientRect(): 

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer поддерживает это с тех пор, как вы, вероятно, о нем позаботитесь, и наконец он был стандартизирован в CSSOM Views . Все остальные браузеры приняли его давно .

Некоторые браузеры также возвращают свойства высоты и ширины, хотя это нестандартно. Если вас беспокоит совместимость с более старыми браузерами, проверьте исправления этого ответа для оптимизированной, унизительной реализации.

Значения, возвращаемые element.getBoundingClientRect(), относятся к области просмотра. Если вам это нужно относительно другого элемента, просто вычтите один прямоугольник из другого: 

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');
296 голосов
/ 14 января 2009

Библиотеки идут на все, чтобы получить точные смещения для элемента.
Вот простая функция, которая делает работу при любых обстоятельствах, которые я пробовал. 

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;
198 голосов
/ 29 января 2015

Это сработало для меня (модифицировано из ответа с наибольшим количеством голосов): 

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

Используя это, мы можем позвонить 

getOffset(element).left

или 

getOffset(element).top
34 голосов
/ 13 августа 2010

Если страница включает - по крайней мере - любой "DIV", функция, заданная meouw, выбрасывает значение "Y" за пределы текущих ограничений страницы. Чтобы найти точную позицию, вам нужно обработать и offsetParent, и parentNode.

Попробуйте код, приведенный ниже (проверяется на FF2): 


var getAbsPosition = function(el){
    var el2 = el;
    var curtop = 0;
    var curleft = 0;
    if (document.getElementById || document.all) {
        do  {
            curleft += el.offsetLeft-el.scrollLeft;
            curtop += el.offsetTop-el.scrollTop;
            el = el.offsetParent;
            el2 = el2.parentNode;
            while (el2 != el) {
                curleft -= el2.scrollLeft;
                curtop -= el2.scrollTop;
                el2 = el2.parentNode;
            }
        } while (el.offsetParent);

    } else if (document.layers) {
        curtop += el.y;
        curleft += el.x;
    }
    return [curtop, curleft];
};
34 голосов
/ 14 января 2009

HTML-элементы в большинстве браузеров будут иметь: - 

offsetLeft
offsetTop

Они определяют положение элемента относительно его ближайшего родителя, который имеет макет. К этому родителю часто можно получить доступ со свойством offsetParent.

IE и FF3 имеют 

clientLeft
clientTop

Эти свойства встречаются реже, они задают положение элементов вместе с родительской клиентской областью (заполненная область является частью клиентской области, но границы и поля - нет).

32 голосов
/ 14 января 2012

Вы можете добавить два свойства к Element.prototype, чтобы получить верхнюю / левую часть любого элемента. 

Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

Это называется так: 

var x = document.getElementById( 'myDiv' ).documentOffsetLeft;

Вот демонстрация, сравнивающая результаты с jQuery offset().top и .left: http://jsfiddle.net/ThinkingStiff/3G7EZ/

24 голосов
/ 24 сентября 2018

Если вы хотите, чтобы это было сделано только в JavaScript , вот несколько однострочников с использованием getBoundingClientRect()

window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X

window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y

Первая строка вернет offsetLeft скажем, X относительно документа.

Вторая строка вернет offsetTop скажем, Y относительно документа.

getBoundingClientRect() - это функция javascript, которая возвращает позицию элемента относительно окна просмотра окна.

21 голосов
/ 26 июля 2013

Чтобы получить позицию относительно страницы эффективно и без использования рекурсивной функции: (также включает IE) 

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;
19 голосов
/ 22 мая 2017

Как насчет этого, передав идентификатор элемента, и он вернётся влево или вверх, мы также можем объединить их:

1) найти слева 

function findLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.left + window.scrollX;
} //call it like findLeft('#header');

2) найти топ 

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top + window.scrollY;
} //call it like findTop('#header');

или 3) найти левую и верхнюю часть вместе 

function findTopLeft(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');
16 голосов
/ 14 января 2009

Возможно, вам лучше будет использовать JavaScript-фреймворк, в котором есть функции для возврата такой информации (и многое другое!) Независимо от браузера. Вот некоторые из них:

С этими фреймворками вы можете сделать что-то вроде: $('id-of-img').top чтобы получить координату Y-пикселя изображения.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...