getBoundingClientRect() 方法

admin發表於2019-03-22
GCclient

JavaScript對dom操作的所有方法使用方式都是非常簡單的。

難點在於理解此方法具體的作用什麼，如果瞭解它的實質，一切都會感覺那麼簡單。

本文所要介紹的方法也是如此，看起來比較唬人，其實非常簡單，尤其是結合圖示介紹。

此方法能夠獲取元素四個邊界相對於瀏覽器客戶區的距離，首先要搞清楚如下概念：

（1）.客戶區：所謂客戶區就是瀏覽器展示網頁具體內容的區域，不包括位址列或者書籤欄這些地方。

（2）.元素：自然是位於頁面中的元素，它既可以位於客戶區範圍內，也可以在其範圍之外。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
oRect = dom.getBoundingClientRect()

此方法返回一個物件，物件具有四個屬性：

（1）.left：返回dom元素左邊界距離客戶區左部的距離，返回值是一個數字，單位是畫素。

（2）.top：返回dom元素上邊界距離客戶區頂部的距離，返回值是一個數字，單位是畫素。

（3）.right：返回dom元素右邊界距離客戶區左部的距離，返回值是一個數字，單位是畫素。

（4）.bottom：返回dom元素底邊界距離客戶區頂部的距離，返回值是一個數字，單位是畫素。

瀏覽器支援：

（1）.IE瀏覽器支援此方法。

（2）.火狐瀏覽器支援此方法。

（3）.Opera瀏覽器不支援此方法。

（4）.谷歌瀏覽器支援此方法。

（5）.safria瀏覽器支援此方法。

前面對此方法進行了大量概念上的闡述，肯定有不少朋友看了感覺有點迷糊。

不用擔心，下面給出圖示，也許一張圖片比上面所有文字的作用都要大：

a:3:{s:3:\"pic\";s:43:\"portal/201903/22/231933jutzssgguo1tgt21.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖片說明：

（1）.藍色矩形就是一個dom元素，它位於客戶區內。

（2）.灰色的區域就是瀏覽器的客戶區，也就是瀏覽器真正顯示網頁內容的部分。

關於getBoundingClientRect方法的功能已經被圖片展示的很清楚，無需再多介紹。

還有一種情況是，元素在客戶區之外，那麼我們應該如何去計算相關尺寸呢，還是圖片比較清楚：

a:3:{s:3:\"pic\";s:43:\"portal/201903/22/231948hr02t0eh0yweryy0.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖片說明：

（1）.藍色矩形有一個部分位於客戶區之外，距離的計算方式沒有任何不同。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  height:1000px;
  width:1500px;
  text-align:center;
}
#text{
  width:100px;
  height:100px;
  background-color:#60C;
  margin-top:100px;
  margin-left:50px;
}
#zuobiao{
  width:150px;
  height:150px;
  background-color:#F30;
  position:absolute;
  top:250px;
  left:250px;
  font-size:12px;
}
</style>
<script> 
window.onscroll=function(){ 
  let otext=document.getElementById("text");
  let ozuobiao=document.getElementById("zuobiao");
  let oRect=otext.getBoundingClientRect();
  ozuobiao.innerHTML="left:"
  +oRect.left+"<br/>top:"
  +oRect.top+"<br/>right:"
  +oRect.right+"<br/>bottom:"
  +oRect.bottom;
} 
</script> 
</head> 
<body> 
  <div id="text"></div>
  <div id="zuobiao"></div>
</body> 
</html>

上面程式碼是一個簡單的程式碼例項，分析如下：

（1）.我們要獲取的是紫色矩形框在客戶區中的位置。

（2）.橙色矩形框用於顯示相關資訊。

（3）.為window註冊scroll事件，拖動滾動條能夠實時將資訊顯示於橙色div中。

特別注意的是，此方法的返回值是一個物件，此物件具有四個方位屬性，這四個屬性返回數字，不帶單位。

相關文章