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

2022-08-30 19:18:50

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

下面上HTML代码

<div class="left_footer">

　  <p class="p1" 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元素就可以进行相关的函数操作了

这里的话比如说获取第一个p元素

var element = document.querySelector(".left_footer .p1");

接下来直接将element传入函数即可

下面我们直接上函数代码：

　　其中的element的意思是代表的是我们需要操作的这个节点，我们只需要把对应的节点传入即可

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

function getElementTop(element) {

      var actualTop = element.offsetTop;    //这是获取元素距父元素顶部的距离

      var current = element.offsetParent;   //这是获取父元素

      while (current !== null) {      //当它上面有元素时就继续执行

        actualTop += current.offsetTop;   //这是获取父元素距它的父元素顶部的距离累加起来

        current = current.offsetParent;　　//继续找父元素

      }

      return actualTop;

    },

以上就是如何获取顶部的值，那么获取距左边的距离道理也是一样的，这里我就不在多说了哈

上一篇：找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置

码农公寓