jQuery offset top работает неправильно

я пытаюсь создать скрипт, нарисовать что-то в элементе мышью, и я использую Raphaeljs для этого.

для правильного рисования мне нужно найти top и left of input‍‍ элемент. Я использую var offset = $("#input").offset(); и left и top.

но top значение неверно. Это 10px ниже top расстояние. Я думаю, что 10px возможно, изменение в разных разрешениях, тогда я не могу добавить 10px это нормально, то я хочу чтобы знать, как я могу решить проблему!

я загрузил свой тест здесь.

14
javascript jquery offset raphael

3 ответов

в jQuery

23

у меня есть два разных решения:

1) вы можете рассчитать общую высоту элемента выше с outerHeight(true), то метод. Этот метод будет вычислять высоту с полями, отступами и границами.

и не будет создавать конфликт, он вернет значение true. вот пример jsFiddle.

HTML-код

<div class="header"></div>
<div class="nav"></div>
<div class="myEle"></div>

jQuery

var myEleTop = $('.header').outerHeight(true) + $('.nav').outerHeight(true);

2) если вы определили top css к элементу, который расположен относительно тела, вы также можете использовать это значение:

parseInt($('#myEle').css('top'));
5

после борьбы с этим некоторое время и рассмотрения различных потенциальных ответов я пришел к выводу, что jQuery offset ().топ!--2--> (и предположительно DOM API, который он использует) слишком ненадежен для общего использования. Он не только документирован как исключающий поля уровня html, но и возвращает неожиданные результаты в нескольких других случаях.

position ().топ!--2--> работает, но может быть нецелесообразно / возможно создать страницу так, чтобы она аналог.

к счастью, я нашел это элемент.getBoundingClientRect().топ!--2--> получает положение относительно окна просмотра отлично. Затем вы можете добавить на $(документ).scrollTop() чтобы получить позицию сверху документа, если это необходимо.

4