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

最新推荐文章于 2023-04-09 10:05:41 发布

原创最新推荐文章于 2023-04-09 10:05:41 发布 · 5.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #javascript

收录于

原生javascript 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了JQuery中offset()与position()方法的区别，通过示例代码展示了这两种方法的具体应用，并给出了它们的原生JavaScript实现方式。

$(() => {
    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,
        }
    }
})