jQuery偏移顶部无法正常工作

Question

我正在尝试创建一个脚本,通过鼠标在元素中绘制一些东西,我正在使用Raphaeljs它.

对于正确的图纸我需要找到top和left的input??元素.我使用的是var offset = $("#input").offset();得到left和top.

但top价值不正确.它10px低于实际top距离.我认为10px可能在不同的分辨率上有所改变,然后我无法正常添加10px它然后我想知道如何解决问题!

我在这里上传了我的考试.

Answer 1

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" );

Answer 2

经过一段时间的努力并回顾了各种可能的答案之后，我得出结论，jQuery offset（）。top（以及它使用的DOM API）对于一​​般用途而言过于可靠。它不仅被记录为不包含html级别的边距，而且在其他几种情况下也会返回意外结果。

position（）。top确实可以工作，但是设计页面使其等效是不实际的/不可能的。

幸运的是，我发现element.getBoundingClientRect（）。top可以完美地获得相对于视口的位置。然后，可以添加$（document）.scrollTop（），以根据需要从文档顶部获取位置。

Answer 3

我有两种不同的解决方案:

1)您可以使用outerHeight(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)如果你将topcss 定义为相对于正文提出的元素,你也可以使用这个值:

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