递归猎取页面元素的实在offsetLeft和offsetTop

2024年5月11日 112次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞