求当前元素在页面中的位置

最新推荐文章于 2024-06-07 10:30:53 发布

瑞瑞小同学

最新推荐文章于 2024-06-07 10:30:53 发布

阅读量348

点赞数

本文链接：https://blog.csdn.net/yr123456654321/article/details/105707087

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           #grandfather{
               width: 300px;
               height: 300px;
               margin: 10px;
               padding: 6px;
               border: 10px solid #FF72C0;
           }
           #father{
               width: 200px;
               height: 200px;
               box-sizing: border-box;
               margin: 10px;
               border: 2px solid #0162C8;
               padding: 14px;
               background-color: antiquewhite;
               position: relative;
           }
           #son{
               width: 100px;
               height: 100px;
               box-sizing: border-box;
               margin: 20px;
               background-color: #FF72C0;
               border: 7px solid #0162C8;
               padding: 14px;
           }
       </style>
   </head>
   <body>
       <div id="grandfather">
           <div id="father">
               <div id="son"></div>
           </div>
       </div>

       <script>
           // map对数组拆分,将name和age分开，分别放在两个数组
       var son=document.getElementById("son")
       console.log(getElementLeft(son)); //72
       console.log(getElementTop(son)); //72
       function getElementLeft(obj){
           //1、获取当前元素的左偏移量
           var actuallOffsetLeft=obj.offsetLeft;
           //2、求出定位父级
           var parent=obj.offsetParent;
           //3、循环
           while(parent != null){
               //3.1求出当前的左方偏移量
               actuallOffsetLeft = actuallOffsetLeft + parent.clientLeft + parent.offsetLeft;
               //3.2更新定位父级
               parent=parent.offsetParent;
           }
           return actuallOffsetLeft;
       }
       function getElementTop(obj){
           //1、获取当前元素的上偏移量
           var actuallOffsetTop=obj.offsetTop;
           //2、求出定位父级
           var parent=obj.offsetParent;
           //3、循环
           while(parent != null){
               //3.1求出当前的上方偏移量
               actuallOffsetTop = actuallOffsetTop + parent.clientTop + parent.offsetTop;
               //3.2更新定位父级
               parent=parent.offsetParent;
           }
           return actuallOffsetTop;
       }
       </script>
   </body>
</html>