Я пытаюсь создать script рисовать что-то в элементе с помощью мыши, и я использую Raphaeljs для этого.
Для правильного рисования мне нужно найти top и left элемента input. Я использую var offset = $("#input").offset(); для получения left и top.
Но значение top неверно. Он 10px ниже, чем реальное расстояние top. Я думаю, что 10px может измениться в разных разрешениях, тогда я не могу добавить 10px к нему обычно, тогда Я хочу знать, как я могу исправить эту проблему!
Я загрузил свой тест здесь.
Функция jQuery .offset() имеет это ограничение:
Примечание. jQuery не поддерживает получение смещенных координат скрытых элементов или учет границ, полей или отступов, установленных на элементе body.
Тело в этом случае имеет верхнюю границу 10px, поэтому ваш рисунок отключен на 10 пикселей.
Рекомендуемое решение:
var offset = $("#input").offset();
x = x - offset.left - $(document.body).css( "border-left" );
y = y - offset.top + $(document.body).css( "border-top" );
У меня есть два разных решения:
1) Вы можете рассчитать общую высоту элемента с помощью метода externalHeight (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'));
После долгой борьбы и рассмотрения различных потенциальных ответов я пришел к выводу, что jQuery offset(). top (и, предположительно, DOM API, который он использует) слишком ненадежен для общего использования. Он не только документируется как исключение полей уровня html, но также возвращает неожиданные результаты в нескольких других случаях.
position(). top работает, но может быть нецелесообразно проектировать страницу так, чтобы она была эквивалентной.
К счастью, я обнаружил, что element.getBoundingClientRect(). top отлично позиционирует позицию относительно окна просмотра. Затем вы можете добавить $(документ).scrollTop(), чтобы получить позицию из верхней части документа, если это необходимо.