使用原生JavaScript獲取div高度

HTML 的<div> 元素在 HTML DOM 中由 Div 物件表示。使用 CSS 或 JavaScript 樣式化其他 HTML 元素時，此標籤用於指示這些元素的容器。HTML 中流內容的預設容器是 div 元素。在以某種方式進行 CSS 樣式設定之前，它不會影響內容或佈局。div 元素的高度可以透過多種方式獲取，本文將討論這些方法。

使用 offsetHeight

offsetHeight 是一個屬性，它以畫素返回元素的高度。

語法

offsetHeight 的語法如下所示。

divElement.offsetHeight

offsetHeight：以畫素為單位測量元素的 CSS 高度，包括邊框、填充和元素的水平捲軸（如果存在並呈現）。它不包括偽元素（如 ::before 或 ::after）的高度。

offsetHeight = inner height + padding + border + scrollbar height


透過檢視上圖，我們可以說內部內容和填充、邊框組合在一起被稱為 offsetHeight。

這裡包含捲軸和設計，無論用於內容的示例如何，都用於理解。

邊距將被忽略，並作為整體高度的一部分被認為是 offsetHeight，類似地，offsetWidth 的計算方式與 offsetHeight 相同。

例如，如果您有以下 HTML：

<div id="myDiv" height="400px"></div>

您可以使用以下方法獲取高度：

const height = document.querySelector('#myDiv').offsetHeight
console.log(height)

這將給出以下輸出：

400

示例 1

以下是另一個示例，它嘗試使用 _offsetHeight_ 來檢索 div 的高度：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document.location</title>
   <style>
      .b {
         width: 150px;
         height: 120px;
         background-color: green;
         display: inline-block;
      }
   </style>
</head>
<body>
   <h1>
      Tutorials Point
   </h1>
   <div class="b"></div>
   <p>
      div Height
      <span class="op"></span>
   </p>
   <button onclick="divHeight()">
      Click
   </button>
   <script type="text/javascript">
      function divHeight() {
         divElem = document.querySelector(".b");
         elemHgt = divElem.offsetHeight;
         document.querySelector(".op").textContent = elemHgt + "px";
      }
   </script>
</body>
</html>

執行上述程式後，它將顯示一個框（一個 div 元素）和一個按鈕 **點選**。

單擊按鈕後，將顯示 div 元素（框）的高度。

使用 clientHeight

clientHeight 是一個屬性，它以畫素返回元素的高度。

**clientHeight** - 它包括元素的填充，但不包括其邊框、邊距或水平捲軸（如果存在）。它還可以包含偽元素（如 ::before 或 ::after）的高度。如果元素的內容可以無需垂直捲軸即可容納，則其 scrollHeight 等於 clientHeight。

clientHeight = inner height + padding +scrollbar height

**scrollHeight** - scrollHeight 值等於元素為了在視口中容納所有內容而無需使用垂直捲軸所需的最少高度。

您可以使用 clientHeight 屬性來測量元素的內部高度，包括填充。但是，它將排除元素的邊框、邊距和捲軸高度。

現在來看 clientHeight，內部內容和邊框一起被視為 clientHeight。眾所周知，clientHeight 不包括邊框和邊框上方的層。


示例

下面的示例建立一個 div 元素，並使用 clientHeight 獲取其高度：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document.location</title>
   <style>
      .b {
         width: 150px;
         height: 120px;
         background-color: green;
         display: inline-block;
      }
   </style>
</head>
<body>
   <h1>Tutorials Point</h1>
   <div class="b"></div>
   <p>div Height:<span class="op"></span></p>
   <button onclick="getHeight()">
      Get Height
   </button>
   <script type="text/javascript">
      function getHeight() {
         divElem = document.querySelector(".b");
         elemHgt = divElem.clientHeight;
         document.querySelector(".op").textContent = elemHgt + "px";
      }
   </script>
</body>
</html>

執行上述程式後，它將顯示一個框（一個 div 元素）和一個按鈕 **點選**。單擊按鈕後，將顯示 div 元素（框）的高度。

更新於：2022年9月2日

12K+ 瀏覽量

啟動您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.