關於js獲取元素在屏幕中的位置的方法

針對我們獲取元素在頁面中的位置的問題，我們還是用老師一峰老師的方法來解決吧

下面上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;   
    },

 以上就是如何獲取頂部的值，那么獲取距左邊的距離道理也是一樣的，這里我就不在多說了哈