定义
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>
- css
.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
网友评论