Question

我读过offsetLeft和offsetTop在所有浏览器中都无法正常运行。 jQuery.offset()应该为此提供一个抽象，以提供正确的值xbrowser。

我要做的是获取相对于元素左上角点击元素的坐标。

问题是jQuery.offset().top实际上在FFX 3.6中给我一个十进制值（在IE和Chrome中，这两个值匹配）。

http://jsfiddle.net/htCPp/展示了这个问题。如果单击底部图像，jQuery.offset().top将返回327.5，但offsetTop将返回328。

我想认为offset()正在返回正确的值，我应该使用它，因为它可以跨浏览器工作。但是，人们显然无法点击像素的小数。是确定jQuery返回的偏移量Math.Round()的真实偏移量的正确方法吗？我应该改为使用offsetTop，还是完全使用其他方法？

Answer 1

这是jQuery API Doc关于.offset()所说的内容：

获取第一个元素的当前坐标，或设置每个元素的坐标，在匹配元素集合中，相对的到文件。

这是MDN Web API关于.offsetTop所说的内容：

offsetTop返回当前元素相对于的距离 offsetParent节点
的顶部

这是jQuery v.1.11 .offset()在获取coords时基本上做的事情：

var box = { top: 0, left: 0 };

// BlackBerry 5, iOS 3 (original iPhone)
if ( typeof elem.getBoundingClientRect !== strundefined ) {
  box = elem.getBoundingClientRect();
}
win = getWindow( doc );
return {
  top: box.top  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
  left: box.left + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
};

pageYOffset直观地说明页面滚动了多少
docElem.scrollTop是IE＆lt; 9的回退（在jQuery 2中不支持BTW）
docElem.clientTop是元素顶部边框的宽度（本例中为文档）
elem.getBoundingClientRect()获取相对于文档视口的坐标（请参阅注释）。它可能会返回分数值，因此这是您的bug的来源。页面缩放时也是may cause a bug in IE<8。要避免分数值，请尝试计算位置iteratively

<强>结论

如果您想要相对于父节点的坐标，请使用element.offsetTop。如果要将父卷轴考虑在内，请添加element.scrollTop。（如果你是那个图书馆的粉丝，可以使用jQuery .position()）
如果您想要相对于视口的坐标，请使用element.getBoundingClientRect().top。如果要将文档滚动到帐户，请添加window.pageYOffset。如果文档没有边框（通常没有边框），则无需减去文档的clientTop，因此您具有相对于文档的位置
如果不将元素边框视为元素

element.clientTop

Answer 2

我认为你是对的，人们不能点击半像素，所以个人而言，我会使用舍入的jQuery偏移......

Answer 3

试试这个：parseInt(jQuery.offset().top, 10)

Answer 4

有offset可能是非整数，使用em作为度量单位，font-sizes中相对%。

我还认为，当offset不是zoom时100%可能不是整数，但这取决于浏览器如何处理缩放。

Answer 5

您可以使用parseInt(jQuery.offset().top)始终在所有浏览器中使用Integer（原始 - int）值。

offsetTop vs. jQuery.offset（）。top

5 个答案: