Я пытаюсь получить координаты элемента на странице. Я использовал стандартный способ его получения:
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;
]. Это связано с фактом, описанным в этой ветке :
После некоторых попыток с 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, чтобы уточнить.