jquery中 offset(）计算的偏移量 和 原生Dom计算的偏移量不一致；

目录

一、问题

二、原因及解决方法

三、总结

---

一、问题

1.需求：有一个表格，单元格宽度不相等，单元格上面覆盖着一个input输入框。想要通过相对位置计算 输入框到底在表格的第几列。

思路：通过循环表格第一行单元格计算左边偏移量，直到累加的左偏移量大于或等于 输入框的左偏移量，此时的单元格所在的列即 输入框在表格的列。

算了半天，发现怎么算都不对。打印发现：我用offset().left计算的第一行第一个单元格的左边偏移量竟然有580px,相对外面的div明显不正确呀，看着就还没有100px；用offsetLeft计算输入框的左偏移量。

二、原因及解决方法

1.原因：offset()计算的偏移量竟然是 相对于 浏览器文档的距离(body) ！！！！！真是难以置信，因为原生DOM也有计算偏移量的属性 offsetLeft,取得是相对最近的有定位的父元素到当前元素的距离。

我的外层div有定位，所以offsetLeft计算时是相对于外层div的；而单元格的左偏移量计算是相对于

body的；这两个值根本就无法比较，根本就不可能计算出输入框在表格的第几列。

2.解决方法：jquery中提供了 position().left 方法取相对偏移量，结果和offsetLeft计算结果一致。

三、总结

1.在通过偏移量计算位置时：尽量统一使用jquery方法  或  原生DOM计算方式。不要混合使用，因为有些方法看着是相似的，其实他们的含义是不一样的。如上面的offset().left和offsetLeft理所当然的认为他们一样，结果根本不一样。

2.offset().left是相对于body的偏移量；

3.offsetLeft===position().left  都是相对于有定位的父元素的偏移，当父元素都没有定位时，才是相对于body的偏移量。

/*

感谢wxy的帮助！

希望对你有帮助！

如有错误，欢迎指正！

*/