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

最新推荐文章于 2023-06-17 13:46:15 发布

黄河爱浪

最新推荐文章于 2023-06-17 13:46:15 发布

阅读量2.5k

点赞数

分类专栏： jQuery 文章标签： offset() position()

本文链接：https://blog.csdn.net/u013350495/article/details/82534003

版权

jQuery 专栏收录该内容

40 篇文章

订阅专栏

本篇文件向大家介绍的方法是 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;
}

<!-- html -->
<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盒子模型知识。写好一手布局，才能写好一手脚本。

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号