原生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的详细讲解
文章源于:http://pwwzsj.com/article/dsojijo.html