递归获取页面元素的真实offsetLeft和offsetTop

2024年3月11日 176次阅读 来源: minimax

由于父元素的定位属性, 导致子元素及其孙元素等的offsetLeft和offsetTop变得和预期不一致(预期上都是到屏幕左边和上边的位置),
由于需要做鼠标拖动旋转和鼠标框选, 所以必须拿到统一坐标系的相对位置的值(距离屏幕左上角), 于是就有了递归计算元素的真实offsetleft和offsettop的值;

css初始化;

<style>
* {
  margin: 0px;
  padding: 0px;
}
</style>

随意布局, top, left, padding,margin随意填写

<div class="c" style="position: absolute;left:10px;top: 10px;padding: 20px;">
  <div class="b" style="position: relative;left:-50px;top:-60px;padding: 200px;">
    <div id="a" style="width: 400px;height: 400px; border: 1px solid red;">
      123123123
    </div>
  </div>
</div>
<script>
  let a = document.getElementById('a');
  console.log(a);//a元素
  console.log(a.offsetTop);//实际上此时a的offsetTop和a的offsetLeft已经被父元素的定位所改变, 不准确
  console.log(a.offsetLeft);
  document.onmousedown = function (e) {
    console.log(e.clientX)
    console.log(e.clientY)
    console.log(getreal(a));
  }
    
  function getreal(el, pname = 'body') {
    let left = el.offsetLeft;
    let top = el.offsetTop;
    if (el.offsetParent && el.offsetParent.tagName !== pname) {//默认一致计算到body, 实际上需要根据需求(实际坐标点)进行修改, 可以用className或者id或者别的什么的, 灵活改变;
      let p = getreal(el.offsetParent, pname);
      left += p[0];
      top += p[1];
    }
    return [left, top];
  }
</script>
    原文作者：minimax
    原文地址: https://segmentfault.com/a/1190000019370610
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞