目录
一、问题
二、原因及解决方法
三、总结
一、问题
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的帮助!
希望对你有帮助!
如有错误,欢迎指正!
*/