对offsetTop以及offsetLeft的理解

最新推荐文章于 2024-05-20 10:22:47 发布

加鸡腿

最新推荐文章于 2024-05-20 10:22:47 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： offsetTop offsetLeft

css 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

页面中的元素的offsetLeft ：离其最近的已经定位的元素

① 如果离其最近的元素没有定位，就相对于body元素计算
例如：

 <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background: red;
        }

        #box2 {
            width: 50px;
            height: 50px;
            background: green;
            margin: 0 auto;
        }
    </style>

<body>
    <div class="box1">
        <div id="box2"></div>
    </div>
    <script type="text/javascript">
        var box2 = document.getElementById('box2');
        alert(box2.offsetParent.tagName);          //输出BODY
        alert(box2.offsetLeft);                    //输出从33
    </script>
</body>

id为box2的div元素的祖先元素中没有已经定位的元素，所以box2的offsetLeft是相对于body元素计算所得的。

② 离其最近的元素已经定位
例如：

 <style type="text/css">
        .box1 {
            width: 100px;
            height: 100px;
            background: red;
            position:relative;   /* 这个是多加的 */
        }

        #box2 {
            width: 50px;
            height: 50px;
            background: green;
            margin: 0 auto;
        }
    </style>

<body>
    <div class="box1">
        <div id="box2"></div>
    </div>
    <script type="text/javascript">
        var box2 = document.getElementById('box2');
        alert(box2.offsetParent.tagName);          //输出DIV
        alert(box2.offsetLeft);                    //输出从25
    </script>
</body>

offsetTop同理.

参考：
https://www.cnblogs.com/luoyicom/p/5705214.html

加鸡腿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
对offsetTop以及offsetLeft的理解

页面中的元素的offsetLeft是离其最近的已经定位的元素① 如果离其最近的元素没有定位，就相对于body元素计算例如： <style type="text/css"> .box1 { width: 100px; height: 100px; background: red; ...
复制链接

扫一扫

专栏目录