Получить реальное смещение влево / вверх элемента со встроенным смещением. Родитель

Я пытаюсь получить координаты элемента на странице. Я использовал стандартный способ его получения:

var el = element, pos = {x: 0, y: 0};
while ( el ) {
    pos.x += el.offsetLeft;
    pos.y += el.offsetTop;
    el = el.offsetParent;
}

Но этот метод не работает, когда рассматриваемый элемент имеет display: block , а один из offsetParents имеет display: inline; ]. Это связано с фактом, описанным в этой ветке :

The element starts in the middle of the text

После некоторых попыток с jQuery выясняется, что их метод .offset () возвращает правильное смещение, и я ' Я просмотрел источник, но не нашел, как именно они это делают. Итак, мой вопрос: как мне получить точную позицию? Я не могу использовать jQuery для этого проекта, а метод в потоке, описанном ранее , слишком громоздок, добавление элемента и тестирование - это слишком много работы (с точки зрения производительности), а использование Element.getBoundingClientRect также недоступно.

Если вы хотите попробовать, вы можете перейти на Apple.com откройте выбранный отладчик и введите следующее:

var el, el2;
el = el2 = document.querySelector('#worldwide span');
var pos = {x: 0, y: 0};
while ( el2 ) {
    pos.x += el2.offsetLeft;
    pos.y += el2.offsetTop;
    el2 = el2.offsetParent;
}
alert("Calculated position: " + pos.x + "x" + pos.y + " window size: " + screen.width + "x" + screen.height);

С помощью этого кода я получаю: Расчетное положение: 1354x988 размер окна: 1280x800 (т.е. смещение влево - это путь экрана, который это явно не так)

Как такое возможно? Есть какие-нибудь обходные идеи? Приближения? Это не обязательно должно быть точно, но должно быть лучше, чем раньше. Спасибо.

Edit: это для механизма рендеринга WebKit, чтобы уточнить.

5
задан Community 23 May 2017 в 11:45
поделиться