js获取某dom到根元素的offsetLeft/offsetTop

**小星星**

于 2020-01-14 11:30:01 发布

阅读量1.7k

点赞数

分类专栏： JavaScript

原文链接：https://www.haorooms.com/post/js_root_offsetleft

版权

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种计算DOM元素相对于根元素距离的方法，通过递归累加offsetLeft和offsetTop属性，实现了获取元素到页面顶部和左侧的实际偏移量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言
大家知道，offsetLeft和offsetTop都是获取当前元素到其定位父级（offsetParent）的距离，我前面也有很多文章介绍宽高和offset,例如：https://www.haorooms.com/post/js_jquery_height 等在实际的开发过程中，我们通常要获取dom到根元素的距离。这个如何做呢？

思路
其实很简单，父元素是offsetParent，我们循环查找offsetParent，直到根节点为止。

获取距离顶部距离

 getElementTop(element) {
      var actualTop = element.offsetTop
      var current = element.offsetParent

      while (current !== null) {
        actualTop += current.offsetTop
        current = current.offsetParent
      }
      return actualTop
    },

获取距离左侧的距离

  getElementLeft(element) {
      var actualLeft = element.offsetLeft
      var current = element.offsetParent

      while (current !== null) {
        actualLeft += current.offsetLeft
        current = current.offsetParent
      }
      return actualLeft
    },

小结
今天文章比较简单，主要是工作中用到的总结一下~