码迷,mamicode.com
首页 > Web开发 > 详细

关于js获取元素在屏幕中的位置的方法

时间:2020-02-07 10:53:08      阅读:371      评论:0      收藏:0      [点我收藏+]

标签:current   css   页面   问题   actual   off   eve   pre   top   

针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧

下面上HTML代码

<div class="left_footer">
   <p data-num="1" ref="data" @mouseenter="mOver($event)" @mouseleave="mOut($event)">上</p>
   <p data-num="2" ref="data" @mouseenter="mOver($event)" @mouseleave="mOut($event)">右</p>
   <p data-num="3" ref="data" @mouseenter="mOver($event)" @mouseleave="mOut($event)">左</p>
</div>

我拿上面的代码来简单举下例css代码我就不上了,在这里不影响

在上面我需要获取到对应的DOM元素就可以进行相关的函数操作了

下面我们直接上js代码:

  其中的element的意思是代表的是我们需要判断的这个节点

  函数的返回值就是我们所得到的距离值

getElementTop(element) {
      var actualTop = element.offsetTop;    //这是获取元素距父元素的的距离
      var current = element.offsetParent;   //这是获取父元素
      while (current !== null) {      //当它上面有元素时就继续执行
        actualTop += current.offsetTop;   //这是获取父元素距它的的父元素左上角的距离
        current = current.offsetParent;
      }
      return actualTop;   
    },

 

关于js获取元素在屏幕中的位置的方法

标签:current   css   页面   问题   actual   off   eve   pre   top   

原文地址:https://www.cnblogs.com/dy105525/p/12272072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!