js原生实现jquery方法offset()和position()

最新推荐文章于 2023-04-25 13:19:27 发布

liu__software

最新推荐文章于 2023-04-25 13:19:27 发布

阅读量536

点赞数

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

原文链接：https://blog.csdn.net/u011500781/article/details/77397274

版权

javascript 专栏收录该内容

148 篇文章

订阅专栏

本文详细分析了jQuery中的offset()和position()两个方法的区别。offset()返回元素相对于文档的偏移，而position()则返回元素相对于最近定位祖先元素的位置。同时，文章给出了两个方法的原生JavaScript实现，帮助理解其工作原理。

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

$(() => {
    console.log($('p').offset())
    console.log($('p').position())
    console.log(offset($('p')[0]))
    console.log(position($('p')[0]))

    // jquery offset原生实现
    function offset(target) {
        var top = 0,
            left = 0

        while(target.offsetParent) {
            top += target.offsetTop
            left += target.offsetLeft
            target = target.offsetParent
        }

        return {
            top: top,
            left: left,
        }
    }

    // jquery position原生实现
    function position(target) {
        return {
            top: target.offsetTop,
            left: target.offsetLeft,
        }
    }
})