offset().left的获取的长度到底在那的实验

最新推荐文章于 2022-06-20 13:13:53 发布

weixin_30292843

最新推荐文章于 2022-06-20 13:13:53 发布

阅读量205

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhujifa/p/10766061.html

版权

对于offset().left，top其实在网上很多说的都是迷迷糊糊的搞得人晕头转向的

所以我自己写了段代码证明一下到底是咋回事！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            border:0;
        }
        .a{
            width: 400px;
            height: 400px;
            background-color: #222222;
            position: relative;
            left:100px;

        }
        .b{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            top:100px;
            left:50px;
        }
        .cp{
            width: 50px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div class="a">
        <div class="b">
            <div class="cp">hello</div>
        </div>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".cp").html("left"+$(".cp").offset().left+"top:"+$(".cp").offset().top);
        });
    </script>
</body>
</html>

结果如下图：

然后把CSS修改为：

<style type="text/css">
.a{
width: 2400px;
height: 4000px;
background-color: #222222;
position: relative;
left:100px;

}
.b{
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
top:1000px;
left:50px;
}