jQuery 获取元素位置 offset() 和 position()

青旅半醒 2022-05-14 13:35 419阅读 0赞

本篇文件向大家介绍的方法是 **offset()** 和 **position()** ，这两个方法有什么关系？下面的内容做详细介绍。

**offset()**功能描述：在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。

**position()** 功能描述：获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 注：offset parent指离该元素最近的而且被定位过的祖先元素 ) 。

这两个方法的功能都是获取元素的坐标。相信大家使用的一般都是 offset() 方法而几乎不知道  position() 方法，因为网上所得到的答案几乎都是千篇一律的 offset() 方法。

既然功能一样，却又存在两个方法，那么他们肯定有不同。我们经常需要计算一个元素的相对坐标。通过当前元素与参照元素计算后得知。大jQuery为了方便开发者，专门提供了 position() 方法来解决这个问题。请看下面的代码

/* CSS */
    #div1{
        position: relative;
        margin: 100px auto;
        width: 300px;
        height: 300px;
        border: #e5e5e5 solid 1px;
    }
    #div2{
        position: absolute;
        width: 50px;
        height: 30px;
        background-color: #e5e5e5;
        left: 123px;
        top: 66px;
        margin: 22px 0 0 45px;
    }

<div id="div1">
        <div id="div2"></div>
    </div>

/* js */
    console.log($("#div2").offset());
    //  {top: 189, left: 273}
    console.log($("#div2").position());
    //  {top: 66, left: 123}

通过上面的代码得知，position() 非常方便的帮助我们计算了 \#div2 元素 相对于 \#div1 的坐标。这是一个好方法，但是它也有要求。那就是它所参照的父元素一定要是 position: relative 的元素。

大家可以从看完这篇文章开始，合理的使用 position() 方法吧，很方便有木有。

如果你阅读这篇文章后，有一丢丢的小疑惑，建议你去巩固CSS盒子模型知识。写好一手布局，才能写好一手脚本。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220514/0270d8d5be7544a9b6a13edf844d4327.png