JavaScript 獲取div在頁面中座標

antzone發表於2019-04-15
JavaScript

本章節通過程式碼例項介紹一下如何獲取一個元素在頁面中的位置。

下面的程式碼是以div為例，對於其他的元素也是如此。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  padding:0px;
  margin:0px;
}
#thediv{
  width:100px;
  height:125px;
  margin:200px;
  background:green;
  text-align:center;
  font-size:12px;
  line-height:125px;
}
</style> 
<script type="text/javascript">  
function getIE(e,show){
  var t=e.offsetTop;
  var l=e.offsetLeft;
  while(e=e.offsetParent){
    t+=e.offsetTop;
    l+=e.offsetLeft;
  }
  show.innerHTML="top="+t+"/nleft="+l;
}
window.onload=function(){
  var odiv=document.getElementById("thediv");
  var oshow=document.getElementById("show");
  getIE(odiv,oshow)
}
</script>
</head>
<body>
<div id="show">螞蟻部落</div>
<div id="thediv">螞蟻部落</div>
</body>
</html>

以上程式碼實現了我們的要求，能夠獲取div在頁面中的位置，下面簡單介紹一下它的實現過程。

一.程式碼註釋：

（1）.function getIE(e,show){}，此函式可以獲取響應物件在頁面黃總的位置，並將位置顯示在指定元素中，第一個引數是要獲取位置的元素物件，第二個引數是顯示位置的元素物件。

（2）.var t=e.offsetTop，返回元素距離最近定位父級元素頂部的距離，如果父級中沒有定位元素，則返回距離body頂端的距離。

（3）.var l=e.offsetLeft，返回元素距離最近定位父級元素左部的距離，如果父級中沒有定位元素，則返回距離body左端的距離。

（4）.while(e=e.offsetParent){

    t+=e.offsetTop;

    l+=e.offsetLeft;

}

上面的迴圈語句非常的重要，因為有可能元素是被多層巢狀的，所以相關距離需要進行疊加。

（5）.show.innerHTML="top="+t+"/nleft="+l，將位置資料寫入指定物件。

二.相關閱讀：

（1）.offsetTop屬性參閱JavaScript offsetTop一章節。

（2）.offsetParent屬性參閱JavaScript offsetParent一章節。  

相關文章