在处理复杂的dom结构时,经常会遇到需要计算某个元素相对于特定父级元素的位置的情况。例如,在如下的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>
如果我们想知道id="node-root"及其所有子孙节点相对于id="wrapper"的位置(即left和top属性),该如何实现呢?
为了解决这个问题,我们可以编写两个函数:一个函数用于计算元素相对于文档的偏移量,另一个函数则用于计算元素相对于指定父级元素的偏移量。
首先,我们定义一个函数offset,用于获取元素相对于文档的最顶部及最左边的距离:
/** * 获取元素距浏览器最顶部及最左边的距离 * @param ele dom元素 * @returns {{top: number, left: number}} */ function offset(ele) { var position = { top: 0, left: 0 }; if (!ele || ele.nodetype != 1) { return position; } var offsetparent = ele.offsetparent; position.top = ele.offsettop; position.left = ele.offsetleft; while (offsetparent != null) { position.top += offsetparent.offsettop; position.left += offsetparent.offsetleft; offsetparent = offsetparent.offsetparent; } return position; }
接下来,我们定义另一个函数offsetinparent,用于计算元素相对于指定父级元素的偏移量:
/** * 获取元素距指定父级元素最顶部及最左边的距离 * @param ele dom元素 * @param boundaryparent 边界父级元素,默认为null * @returns {{top: number, left: number}} */ function offsetinparent(ele, boundaryparent) { var position = { top: 0, left: 0 }; var eloffset = offset(ele); var parentoffset = { top: 0, left: 0 }; if (boundaryparent) { parentoffset = offset(boundaryparent); } position.top = eloffset.top - parentoffset.top; position.left = eloffset.left - parentoffset.left; return position; }
通过这两个函数,我们就可以计算出任何节点相对于指定父级节点的left和top属性。例如,要计算id="node-22-1"相对于id="wrapper"的位置,可以这样调用:
console.log(offsetInParent(document.getElementById('node-22-1'), document.getElementById('wrapper')));
通过这样的方法,我们可以轻松获取任何层级的dom元素到指定上层dom的left、top属性,从而在各种复杂的布局计算中灵活应用。
以上就是如何计算DOM元素相对于指定父级的位置?的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号