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

更新时间：2023-10-16 22:33:10

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)

上一篇 : ：SparkAction纱线集群下一篇 : 火花提交群集模式不起作用

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

相关阅读

推荐文章