Question

我正在尝试创建一个脚本，通过鼠标在元素中绘制一些内容，我正在使用Raphaeljs来执行此操作。

为了正确绘制，我需要找到top元素的left和input‍‍。我正在使用var offset = $("#input").offset();获取left和top。

但top值不正确。比实际10px距离top低10px。我认为10px可能会在不同的分辨率下发生变化，因此我无法正常添加{{1}}然后我想知道如何解决问题！

我上传了我的测试here。

Answer 1

jQuery .offset()函数有this limitation：

注意：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

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

1）您可以使用outerHeight(true)方法计算上述元素的总高度。此方法将使用边距，填充和边框计算高度。

这不会产生冲突，它会返回真值。 Here is jsFiddle example.

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

Answer 3

经过一段时间的斗争并回顾各种可能的答案后，我得出结论，jQuery offset（）。top （可能是它使用的DOM API）对于一般用途来说太不可靠了。它不仅被记录为排除html级别边距，而且还在其他几种情况下返回意外结果。

position（）。top 确实有效，但设计页面可能不太实际/可能，因此它是等效的。

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

jQuery偏移顶部无法正常工作

3 个答案: