问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

一个关于offsetLeft的纠结的小问题

头像
13486029303
    29425091
    头像
    边城
      59.8k157274
      <!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>offsetleft</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: grey;
            position: absolute
        }

        body {
            position: relative;
        }
    </style>
</head>

<body>
    <div id="div01"></div>
</body>

</html>
<script>
    var div01 = document.getElementById("div01");
    console.log(div01.offsetParent)
    console.log(div01.offsetLeft)
    //使用的是360浏览器
</script>

      在有 body{position:relative;} 的情况下：div01.offsetLeft 输出为0，在没有body{position:relative;} 的情况下，div01.offsetLeft 输出为8，他们div01.offsetParent 输出都是body，多出的 8px 是什么原因导致的呢？（估计是body的margin：8px）但是 offsetParent 是到父级的内边框的距离额

      javascript
      阅读 4.6k
      3 个回答
      得票最新
      头像
      边城
        59.8k157274
        ✓ 已被采纳

        offsetParent 还是一个草案，所以存在一些问题也正常。从 MDN 上来看只清楚 Chrome 和 Edge 实现了，我尝试了一下两个浏览器，结果是一样的。

        然后输入 document.body.offsetParent 和 document.body.parent 来看，一个是 null 一个是 undefined，说明这里页面的根元素就是 body。

        然后文档中提到一个东西叫 "positioned element"，这个概念没找到官方解释，所以不是很清楚。不过从实验的结果来看，不管一个 div 如果设置 display 和 position，它都可以是 offsetParent，而 span 则是 non-positioned。

        换句话说，如果把 container 换成 span，offsetParent 是取不到它的，取到的是它的上一级元素 body。但是 offsetLeft 计算出来却是 body 的 marginLeft + span 的 marginLeft + span.paddingLeft。从这个现象可以推算出，虽然根级 offsetParent 指向 body，但在实际从根级元素计算 offsetLeft 的时候，是从 <html> 开始算的。

        虽然有点不好理解，但实验结果如此——我觉得还是等草案成熟吧。而且也不一定非要用这种方法来获取位置信息。

        下面是我修改出来的实验代码(HTML)

        <!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>offsetleft</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: grey;
            position: absolute
        }

        body {
            /* position: relative; */
        }

        .container {
            position: relative;
        }

        .container2 {
            display: block;
            margin: 4px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="div00"></div>
    <div class="container">
        <div id="div01"></div>
    </div>
    <span class="container2">
        <div id="div02"></div>
    </span>
</body>

</html>
<script>
    function print(el) {
        console.log("offsetParent", el.offsetParent)
        console.log("offsetLet", el.offsetLeft)
    }

    console.log("body.parent", document.body.offsetParent);
    console.log("body.parent", document.body.parent);
    console.log("body padding: ", document.body.style.padding);

    print(document.getElementById("div00"));
    print(document.getElementById("div01"));
    print(document.getElementById("div02"));

</script>

        以及结果 (Chrome 53)

        clipboard.png

        头像
        CRIMX
          9.1k3720

          offsetParent 不一定是直属父元素。absolute 的 containing block 是由最近的 position 不是 static 的父元素宣布的，没有就由 viewport 宣布。然后你没有指定 left 所以会取 static position，即算上 body 的 8px。

          头像
          同梦奇缘
            4.1k21020

            MDN上关于offsetParent的解释：

            HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（closest，指包含层级上的最近）包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null

            为初始化样式的body默认样式：

            clipboard.png

            你的问题里面仅设置了absolute，没有设置top/left这些偏移量，因此默认是在body内的left=0;top=0;处，因此：

            1. 有body{position:relative;}时，相对于body定位，默认为body的left=0;top=0;；因此div01.offsetLeft=0

            2. 没有body{position:relative;}时，标准模式下相对于html定位，默认为body的left=0;top=0;；因此div01.offsetLeft=8px

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题