jQuery偏移量顶部没有'工作不正常

jQuery offset top doesn't work correctly

本文关键字：工作 不正常 偏移量 顶部 jQuery      更新时间：2023-09-26

我正试图创建一个脚本，用鼠标在元素中绘制一些东西，我正在使用Raphaeljs来完成这项工作。

对于正确的图纸，我需要找到的top和left‍CCD_ 4元素。我用var offset = $("#input").offset();得到left和top。

但top值不正确。低于10px‍‍实际CCD_ 10距离。我认为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" );

在与此斗争了一段时间并查看了各种潜在的答案后，我得出结论：jQueryoffset（）.top（可能还有它使用的DOM API）对于一般使用来说太不可靠了。它不仅被记录为排除html级别的边距，而且在其他几种情况下也会返回意外的结果。

position（）.top确实有效，但将页面设计为等效页面可能不实用/不可能。

幸运的是，我发现元素.getBoundingClientRect（）.top可以完美地获得相对于视口的位置。然后，如果需要，您可以添加$（document）.sollTop（）以获取文档顶部的位置。

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

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'));
相关文章：