获取DOM元素相对于父级的left和top值方法

golang学习网今天将给大家带来《如何获取DOM元素相对于父级的left和top值？》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

高效获取DOM元素相对父元素的定位信息

在网页开发中，准确获取DOM元素的定位信息至关重要。本文提供一种JavaScript方法，用于计算任意层级子元素相对于其指定父元素的left和top属性值。

假设存在如下嵌套DOM结构：

<div class="wrapper" id="wrapper">
    <div id="node-root">
        <div id="node-2">
            <div id="node-3"></div>
            <div id="node-3-1"></div>
            <div id="node-3-2"></div>
        </div>
        <div id="node-22">
            <div id="node-22-1"></div>
        </div>
        <div id="node-33">
            <div id="node-33-1"></div>
        </div>
    </div>
</div>

我们需要获取node-root及其所有子节点相对于wrapper元素的left和top偏移量。

首先，定义offset函数计算元素相对于文档的偏移量：

/**
 * 计算元素相对于文档的偏移量
 * @param {HTMLElement} ele DOM元素
 * @returns {{top: number, left: number}}
 */
function offset(ele) {
  let position = { top: 0, left: 0 };
  if (!ele || ele.nodeType !== 1) return position;
  let offsetParent = ele.offsetParent;
  position.top = ele.offsetTop;
  position.left = ele.offsetLeft;
  while (offsetParent) {
    position.top += offsetParent.offsetTop;
    position.left += offsetParent.offsetLeft;
    offsetParent = offsetParent.offsetParent;
  }
  return position;
}

然后，定义offsetInParent函数，利用offset函数计算元素相对于指定父元素的偏移量：

/**
 * 计算元素相对于指定父元素的偏移量
 * @param {HTMLElement} ele DOM元素
 * @param {HTMLElement} boundaryParent 父元素
 * @returns {{top: number, left: number}}
 */
function offsetInParent(ele, boundaryParent) {
  let position = { top: 0, left: 0 };
  let elOffset = offset(ele);
  let parentOffset = offset(boundaryParent) || { top: 0, left: 0 };
  position.top = elOffset.top - parentOffset.top;
  position.left = elOffset.left - parentOffset.left;
  return position;
}

最后，调用offsetInParent函数即可获取例如node-22-1相对于wrapper的left和top值：

console.log(offsetInParent(document.getElementById('node-22-1'), document.getElementById('wrapper')));

此方法适用于任何复杂的DOM结构，只需正确指定目标元素和父元素即可。 该方法高效且准确地解决了获取DOM元素相对定位的问题。

终于介绍完啦！小伙伴们，这篇关于《获取DOM元素相对于父级的left和top值方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！