原生js中offsetTop, offsetLeft与offsetParent的详细讲解

简单说下:offsetTop

offsetTop: 为只读属性。 返回的是一个数字。
它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。
它等价于offsetTop==>元素到offsetParent顶部内边距的距离
offsetTop并不是指距离浏览器窗口最左边的位置。
我的理解：offsetTop的偏移是指当前元素相对其距离自己最近的具有定位属性的父级元素的偏移值。
margin:会影响它的值。 定位的值会影响。 border也会影响。但是padding不会影响。
offsetLeft跟offsetTop是一样的。他们是一对的。

offsetTop 的简单使用

    

        我是标题
    
    

        我是导航
    
    

        我是内容
    

margin 会影响它的值(margin-bottom也不会), border也会影响，padding不会

    

        我是标题
    
    

        我是导航
    
    

        我是内容
    

定位会影响它的值

    


    

        我是标题
    
    

        我是导航
    
    

        我是内容
    

当前元素相对其距离自己最近的具有定位属性的父级元素的偏移

    

        

            son
        
    

子绝父相-子元素距离屏幕顶部的距离

    

        

            son
        
    

offsetParent

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

等价于offsetParent：返回指向最近的一个具有定位的祖宗元素（relative，absolute，fixed）。
若祖宗都不符合条件，offsetParent为body。


    

        son1
    
    

        son
    


let son = document.getElementById('son')
let ele = son.offsetParent;
console.log('ele', ele); // 输出的是body这个元素 若祖宗都不符合条件，offsetParent为body。

本文标题：原生js中offsetTop, offsetLeft与offsetParent的详细讲解
URL标题：http://cdxtjz.cn/article/dsojijo.html