生活随笔
收集整理的這篇文章主要介紹了
原生JS获取元素在文档中的位置
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
原生JS獲取元素在文檔中的位置
原生JS提供了很多關于元素信息的屬性
具體就不總結了
元素在頁面上的位置有絕對位置和相對位置
絕對位置
網頁元素的絕對位置，指該元素的左上角相對于整張網頁左上角的坐標。這個絕對位置要通過計算才能得到。
首先，每個元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）左上角的距離。所以，只需要將這兩個值進行累加，就可以得到該元素的絕對坐標。
但這里要注意一個問題：要考慮offsetParent的border的寬度。
有上面圖可以知道我們需要不斷的累加offsetLeft，而且要考慮border存在的情況。另外要注意offsetParent并不一定是父元素，offsetParent指的是有定位屬性的的父元素
function getElementPageLeft(element
){var actualLeft
=element
.offsetLeft
;var parent
=element
.offsetParent
;while(parent
!=null){actualLeft
+=parent
.offsetLeft
+parent
.clientLeft
;parent
=parent
.offsetParent
;}return actualLeft
;}function getElementPageTop(element
){var actualTop
=element
.offsetTop
;var parent
=element
.offsetParent
;while(parent
!=null){actualTop
+=parent
.offsetTop
+parent
.clientTop
;parent
=parent
.offsetParent
;}return actualTop
;}
相對位置
網頁元素的相對位置，指該元素左上角相對于瀏覽器窗口左上角的坐標。
有了絕對位置以后，獲得相對位置就很容易了，只要將絕對坐標減去頁面的滾動條滾動的距離就可以了。
function getElementViewLeft(element
){var actualLeft
= getElementPageLeft(element
);var scrollLeft
=document
.body
.scrollLeft
||document
.documentElement
.scrollLeft
return actualLeft
-scrollLeft
;function getElementViewTop(element
){var actualTop
= getElementPageTop(element
);var scrollTop
=document
.body
.scrollTop
||document
.documentElement
.scrollTop
return actualTop
-scrollTop
;}
獲取元素的相對位置，JS還提供了一種更簡單的方法：Element.getBoundingClientRect()
Element.getBoundingClientRect()返回一個對象，對象包含了元素距離窗口的位置屬性：left、right、top、bottom
注意：要考慮瀏覽器是否支持此方法！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document
</title><style>*{padding: 0;margin: 0;}#box1{position: relative;width: 500px;height: 500px;background-color: skyblue;margin: 100px;border: 10px solid #000;}#box2{width: 100px;height: 100px;background-color: slateblue;margin-left: 50px;}</style>
</head>
<body><div id="box1"><div id="box2"></div></div><script>function getElementPageLeft(element){var actualLeft=element.offsetLeft;var parent=element.offsetParent; while(parent!=null){actualLeft+=parent.offsetLeft+parent.clientLeft;parent=parent.offsetParent;}return actualLeft;}const box2 = document.getElementById('box2')console.log(getElementPageLeft(box2))console.log(box2.getBoundingClientRect().left)</script>
</body>
</html>
參考鏈接：阮一峰的博客
總結
以上是生活随笔為你收集整理的原生JS获取元素在文档中的位置的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
