HTMLElement.offsetLeft 是一个只读属性,返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。 对块级元素来说,offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。 然而,对于可被截断到下一行的行内元素(如 span),offsetTop 和 offsetLeft 描述的是第一个边界框的位置(使用 Element.getClientRects() 来获取其宽度和高度), 而 offsetWidth 和 offsetHeight 描述的是边界框的尺寸(使用 ?Element.getBoundingClientRect 来获取其位置)。 因此,使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。


offset() 方法设置或返回被选元素相对于文档的偏移坐标。 当用于返回偏移时: 该方法返回第一个匹配元素的偏移坐标。它返回一个带有两个属性(以像素为单位的 top 和 left 位置)的对象。 当用于设置偏移时: 该方法设置所有匹配元素的偏移坐标。


参考链接:

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft#Syntax https://api.jquery.com/offset/


console.log($('#app')[i].offsetLeft);
console.log($('#app').eq(i).offset().left);