原生js獲取 一個dom元素距離頁面可視區域的位置值 -- getBoundingClientRect

getBoundingClientRect()

---

• 這個方法返回一個矩形對象，包含四個屬性：left、top、right和bottom。分別表示元素各邊與頁面上邊和左邊的距離。

  var box=document.getElementById('box'); // 獲取元素

  alert(box.getBoundingClientRect().top); // 元素上邊距離頁面上邊的距離

  alert(box.getBoundingClientRect().right); // 元素右邊距離頁面左邊的距離

  alert(box.getBoundingClientRect().bottom); // 元素下邊距離頁面上邊的距離

  alert(box.getBoundingClientRect().left); // 元素左邊距離頁面左邊的距離

• 注意：IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默認坐標從(2,2)開始計算，導致最終距離比其他瀏覽器多出兩個像素，我們需要做個兼容。