jQuery 偏移顶部无法正常工作

Question

我正在尝试创建一个脚本，通过鼠标在元素中绘制一些东西，我正在使用 Raphaeljs 来做到这一点。

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

但是top 的值不正确。这是10px 低于 ‍‍真正的top 距离。我认为10px 可能会在不同的分辨率下发生变化，然后我无法正常添加10px 然后我想知道如何解决这个问题！

我上传了我的测试here。

Answer 1

jQuery .offset() 函数有this limitation:

注意：jQuery 不支持获取隐藏元素的偏移坐标或考虑在 body 元素上设置的边框、边距或填充。

在这种情况下，主体有 10 像素的上边框，这就是为什么您的绘图偏离了 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) 方法计算以上元素的总高度。此方法将使用边距、填充和边框计算高度。

而且这不会造成冲突，它会返回真值。 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'));