获取元素 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)

 

      

            
这是目标元素
        
 

• 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 …

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

• .parent2中position: relative
  输出：10

  …
  
  注：10 = parent2的paddingTop

• .parent1中position: relative，.parent2中不设position
  输出：21

  …
  
  注： 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

    

        

            
Header
        
        

            

                
这是目标元素
            
        
    

输出：10 …
注：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