jquery中的位置方法offset () 、offsetParent ()、position () 的区别与使用

最新推荐文章于 2024-02-24 18:12:41 发布

Inspiring_

最新推荐文章于 2024-02-24 18:12:41 发布

阅读量485

点赞数 1

文章标签： jquery 位置属性

本文链接：https://blog.csdn.net/weixin_44021199/article/details/98099317

版权

ps:这三个位置属性不接受任何参数

1.position():

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

2.offset():

在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于document。

3.offsetParent():

取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            margin:100px auto;
            position: relative;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    
    </style>
</head>
<body>
   
    <div id="div1">
        <div class="aa"></div>
        <div id="div2" class="aa"></div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        console.log( $('#div2').offset());
        console.log( $('#div2').offsetParent());
        console.log( $('#div2').position());
        
    </script>
    
</body>
</html>

在这里插入图片描述

Inspiring_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery中的位置方法offset () 、offsetParent ()、position () 的区别与使用

ps:这三个位置属性不接受任何参数1.position():获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 注：offset parent指离该元素最近的而且被定位过的祖先元素 )2.offset():在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于document。3.offsetParent():取得离指定元素最近的含有定位信息的祖先元素。...
复制链接

扫一扫