jQuery中的offset,position方法

最新推荐文章于 2024-09-29 15:15:00 发布

转载最新推荐文章于 2024-09-29 15:15:00 发布 · 44 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/superCwen/p/9911650.html

文章标签：

#javascript #ViewUI

offset：是设置或获取元素距离窗口的偏移量

position：是获取元素距离定位元素的距离，不能够进行设置

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .father{
            width:200px;
            height:200px;
            background:red;
            border:50px solid #000;
            position:relative;
        }
        .father .son{
            width:100px;
            height:100px;
            position:absolute;
            left:50px;
            top:50px;
            background:blue;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            console.log($('.father').offset().left)  //获取距离窗口的距离
            $('.father').offset({
                left:50                              //设置距离窗口50px
            })
            console.log($('.son').position().left)     //获取son这个div距定位元素的距离，son的绝对定位是根据father来定位的,所以值也就是son设置的left的值
        })
        
    </script>
    
<body>
    <div class="father"> 
        <div class="son"></div>
    </div>
</body>
</html>