获取元素 offsetTop 的理解

定义

MDN上的解释：

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

offsetParent

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的包含该元素的定位元素或者table,td,th,body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。

释义

offsetTop是相对含有offsetParent属性的父元素来获取。而含有 定位属性（position）的元素或者本身就是 table,td,th,body 的元素，就具备 offsetParent的属性

代码说明

1. 父级是否有定位属性时对比

html (父元素为非 table)

<div class="a"></div>
 <div class="parent">
      <div class="parent2">
            <div class="inner">这是目标元素</div>
        </div>
 </div>

    .a {
            height: 200px;
            background-color: #f00;
        }
        
        .parent1 {
            padding: 10px;
            border: 1px solid #ddd;
        }
        
        .parent2 {
            height: 200px;
            padding: 10px;
            border: 1px solid #ddd;
        }
        
        .inner {
            width: 50px;
            height: 50px;
            background: #f0f;
        }

script

 const inner = document.querySelector('.inner');
 console.log(inner.offsetTop, inner.offsetParent)

结果与分析

1、当.inner父级没有position属性或者position: static的时候
输出：230 <body>…</body>

2、当.inner父级（代码中的.parent1、.parent2）的position属性非static

.parent2中position: relative
输出：10 <div class="parent2">…</div>
注：10 = parent2的paddingTop
.parent1中position: relative，.parent2中不设position
输出：21 <div class="parent1">…</div>
注： 21 = parent1的paddingTop + parent2的上边框 + parent2的paddingTop

分析与结论：在获取 offsetTop的时候，会一层层往上找offsetParent，如果存在，则返回相对该元素的顶部内边距的距离；如果不存在，则最终相对 body

2. 父级中存在`table,td,th,body` 元素

// css
 .a {
            height: 200px;
            background-color: #f00;
        }
        
        .parent-table {
            width: 100%;
            border: 1px solid #ddd;
        }
        
        .parent-table th {
            border-bottom: 1px solid #ddd;
        }
        
        .parent-table th,
        .parent-table td {
            padding: 10px;
        }
        
        .inner {
            width: 50px;
            height: 50px;
            background: #f0f;
        }

// html
<div class="a"></div>
    <table class="parent-table">
        <tr>
            <th>Header</th>
        </tr>
        <tr>
            <td>
                <div class="inner">这是目标元素</div>
            </td>
        </tr>
    </table>

输出：10 <td>…</td>
注：10 = td的paddingTop

3. 当元素为`display:none`

.inner {
     display: none;
}

输出：0 null

总结

HTMLElement.offsetTop 返回当前元素相对于其 offsetParent 元素（设置了position 为非 static 或本身为 table,td,th,body 元素）的顶部内边距的距离。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null，且 offetTop 返回 0

最后编辑于：2021.04.19 16:58:23

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

获取元素 offsetTop 的理解