js 计算当前元素距离顶部距离

js 计算当前元素距离顶部距离在js中可以通过offsetTop获取距离offsetTop//返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。问题：从上文可以看出如果当前元素父级中，有存在定位属性的且

标题 js 计算当前元素距离顶部距离

在js中可以通过offsetTop获取距离

offsetTop //返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。

问题：从上文可以看出如果当前元素父级中，有存在定位属性的且值为relative、absolute或者fixed的
offsetTop方法无法直接获取到顶部的距离也就是当前元素到body的距离

解决方法：采用递归

1.通过查找当前元素中具有定位属性的父级，然后通过对offsetTop的返回值进行累加

var div = document.querySelector('#box')
function calc(dom, distance) {
      		distance = distance || 0
           //可以使用dom.style.positin 但style只能获取到行内属性会出现获取不到属性值返回空字符串
           //getComputedStyle会输出最终应用于该element上的最终样式  IE9+支持
           //currentStyle  IE老版本支持
           if (['relative','absolute','fixed'].includes(getComputedStyle(dom).position)) {
             distance += distance.offsetTop
           }
           if (dom.parentElement.nodeName === 'BODY' || !dom.parentElement) {
                return distance
           }
           return calc(dom.parentElement, distance)
        }
  //最终结果
  let distance = div.offsetTop + calc(div.parentElement)

2.通过offsetpraent来解决

offsetParent定义：offsetParent就是距离该子元素最近的进行过定位的父元素（position：absolute relative fixed），如果其父元素中不存在定位则offsetParent为：body元素

//如果自身有fixed定位火狐浏览器返回body其他返回null
function calc(dom, distance) {
            distance = distance || 0
            if (['BODY',null].includes(dom.offsetParent.nodeName)) {
                distance += dom.offsetTop
                return distance
            } else {
                distance += dom.offsetTop
                return calc(dom.offsetParent,distance)
            }
        }

转载地址:https://huaweicloud.csdn.net/638eec47dacf622b8df8dba8.html?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2_defaultBlogCommendFromBaidu_{activity-1-115033889-blog-101897960.pc_relevant_recovery_v2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2}default_{BlogCommendFromBaidu}activity-1-115033889-blog-101897960.pc_relevant_recovery_v2&utm_relevant_index=1