js中offsetLeft/offsetTop与jq中offset().left/offset().top的区别

web_hwg

于 2017-04-10 10:52:50 发布

阅读量3.6k

点赞数 2

分类专栏： jquery js 文章标签： javascript jquery

本文链接：https://blog.csdn.net/web_hwg/article/details/69943940

版权

js 同时被 2 个专栏收录

12 篇文章

订阅专栏

jquery

6 篇文章

订阅专栏

本文探讨了offsetLeft与jQuery中的offset().left属性的区别。前者根据最近已定位的父元素来确定位置，若无则根据body定位；后者始终计算元素相对于整个文档的位置，不受父元素position属性的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.offsetLeft/offsetTop

在页面任一元素的offsetLeft总是找到离其最近的已经定位的父元素或祖先元素定位，如果没有，就根据根节点body定位，然后获取其left值。

2.offset().left/offset().top

返回或设置匹配元素相对于文档的偏移（位置）。 无论元素的父元素或祖先元素的position属性是什么，总是计算相对于文档的位置。

示例：

#parent{width: 300px;height: 100px;margin: 0 auto;border: 1px solid #ccc;position: relative;}

<div id="parent">
    <p id="child">测试offsetLeft与offset().left的区别</p>
</div>

var left = document.getElementById('child').offsetLeft;
var left1 = $('#child').offset().left;
console.log(left);//结果始终是0
console.log(left1);//结果是相对于文档的偏移