zoukankan      html  css  js  c++  java
  • 计算DOM节点相对于某个特定DOM节点的 offsetTop

    问题描述:

    页面中有这样的结构:

    <main>
      <section>
        <p>long time no see</p>
        <p>long time no see</p>
      </section>
      <table>
        <tr>
          <th>Name</th>
          <th>Info</th>
        </tr>
        <tr>
          <td>Wise</td>
          <td>Wrong</td>
        </tr>
      </table>
    </main>

    需要获取某个 <td> 相对于 <main> 标签的 offsetTop

    如果直接获取 <td> 的 offsetTop,由于 <td> 的 offsetParent 是 <tr>,所以这个值是不准确的,需要另外计算

    解决方案:

    按照 DOM 树结构,一级一级的往上找,直到找到 offsetParent 为 <main> 的节点为止

    然后将中间节点的 offsetTop 相加,就是最终的 offsetTop

    /**
     * 递归计算节点的 offsetTop
     * @param {Element} node      当前节点
     * @param {Element} container 目标节点
     * @param {Number} top        offsetTop
     * @returns Number
     */
    function getAbsTop(node, container, top = 0) {
      if (!node || !container) {
        return 0;
      }
    
      const offsetTop = top + node.offsetTop;
    
      if (node.offsetParent === container) {
        return offsetTop;
      } else {
        return getAbsTop(node.offsetParent, container, offsetTop);
      }
    }

    同样的,offsetLeft 也可以按照这个方法来获取

  • 相关阅读:
    javascript事件列表解说
    如何在ASP.NET页面中嵌入WINFORM控件
    ASP.NET 刷新后如何保持网页的位置
    JS的event 对象
    imp导入数据到ORACLE遭遇ORA12899错误
    求鞍点
    全排列递归实现
    三点顺序
    NYoj 14会场安排问题
    strchr和strstr函数
  • 原文地址:https://www.cnblogs.com/wisewrong/p/14745312.html
Copyright © 2011-2022 走看看