HTML DOM getBoundingClientRect()用法及代碼示例

HTML DOM getBoundingClientRect() 用於返回相對於視口位置的元素大小。它返回一個 DOMRect 類型的對象，該對象具有左、上、右、下、x、y、寬度、高度八個屬性。當滾動位置改變時，邊界矩形位置也會改變。

用法

以下是 getBoundingClientRect() 方法的語法 -

element.getBoundingClientRect()

示例

讓我們看一個 getBoundingClientRect() 方法的例子 -

<!DOCTYPE html>
<html>
<head>
<script>
   function RectInfo() {
      document.getElementById("Sample").innerHTML="";
      var d = document.getElementById("DIV1");
      var Rect = d.getBoundingClientRect();
      rl = Rect.left;
      rt = Rect.top;
      rw = Rect.width;
      rh = Rect.height;
      document.getElementById("Sample").innerHTML +="Left:" + rl + ",<br> Top:" + rt + ",<br> Width:" + rw + ",<br> Height:" + rh;
   }
</script>
<style>
   #DIV1{
      width:350px;
      height:250px;
      border:2px solid blue;
      color:red;
   }
</style>
</head>
<body>
<h1>getBoundingClientRect() example</h1>
<div style="height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<br>
<button onclick="RectInfo()">GET INFO</button>
<p id="Sample"></p>
</body>
</html>

輸出

這將產生以下輸出 -

單擊“獲取信息”按鈕 -

在上麵的例子中 -

我們首先創建了一個高度和寬度分別為 200px 和 300px 的 div。它的溢出屬性設置為自動，即如果內容溢出 div，將自動添加滾動條。它包含另一個 ID 為 “DIV1” 的 div，該 div 應用了一些樣式。

#DIV1{
   width:350px;
   height:250px;
   border:2px solid blue;
   color:red;
}
<div style="height:200px; width:300px; overflow:auto;">
<div id="DIV1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>

然後，我們創建了一個按鈕 GET INFO，當用戶單擊時，它將執行 RectInfo() 方法 -

<button onclick="RectInfo()">GET INFO</button>

RectInfo() 方法使用 getElementById() 方法獲取 <div> 元素並將其分配給變量 d。然後它對變量 d 使用 getBoundingClientRect() 方法返回一個 DOMRect 對象，其中包含有關 div 元素的信息。返回的對象被分配給變量 Rect。

然後我們使用 DOMRect 對象的 left、top、width 和 height 屬性來顯示其相對於視口的位置和大小。此信息使用其innerHTML屬性顯示在id為“Sample”的段落中 -

function RectInfo() {
   document.getElementById("Sample").innerHTML="";
   var d = document.getElementById("DIV1");
   var Rect = d.getBoundingClientRect();
   rl = Rect.left;
   rt = Rect.top;
   rw = Rect.width;
   rh = Rect.height;
   document.getElementById("Sample").innerHTML +="Left:" + rl + ",<br> Top:" + rt + ",<br> Width:" + rw + ",<br> Height:" + rh;
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM getBoundingClientRect() method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。