HOWTO · JavaScript
在 JavaScript 中獲取 div 元素的高度
本教程介紹瞭如何在 JavaScript 中獲取 div 元素的高度。
本頁內容
在 HTML 中，你通過使用 CSS 樣式表或使用 JavaScript 為元素提供的任何 CSS 屬性都在文件物件模型 (DOM) 中設定。通過此 DOM，你可以稍後在 JavaScript 程式碼中輕鬆訪問這些值。有多種方法可以在 JavaScript 中獲取 CSS 屬性的值。本文將介紹如何從我們的 JavaScript 程式碼中獲取 CSS 屬性 height。
下面是我們建立的 HTML 文件。在裡面，我們有一個 body 標籤，它只包含一個 div 元素，其 id 為 container。在 head 標籤中，我們為 div 元素提供了一些基本樣式，如寬度、高度、邊框、填充等。
<!DOCTYPE html>
<html lang="en">
<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</title>
<style>
#container{
width: 100px;
height: 50px;
border: 1px solid red;
padding: 4px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="container"></div>
<script></script>
</body>
</html>
輸出：
如果你執行上面的 HTML 文件，你將在瀏覽器視窗中看到一個像這樣的矩形。
現在我們已經設定好了一切，讓我們在這個 container div 元素上應用各種屬性來獲取它的高度。我們將要編寫的程式碼將位於 body 標籤內的 <script></script> 標籤內。
在 JavaScript 中獲取 div 元素高度的各種方法
首先，我們將使用 getElementById() 方法從 HTML DOM 中獲取 container 元素的引用。然後我們將該元素儲存在 JavaScript 中的 element 變數中。
let element = document.getElementById('container');
現在我們有了 div 元素，讓我們使用 JavaScript 使用各種屬性獲取 div 的高度。
1. 客戶端高度
clientHeight 返回元素的高度，包括作為整數值的填充。
console.log(element.clientHeight);
輸出：
58
由於我們在計算高度時為容器的所有四個邊新增了 4px 的填充，當前為 50px，因此 4px 頂部和 4px 底部的填充，即 8px 的總填充將被新增到高度。這將導致總高度為 58px。
2. 偏移高度
offsetHeight 由元素的高度組成，其中還包括任何填充、邊框和水平滾動條（如果存在）。
console.log(element.offsetHeight);
輸出：
60
與 clientHeight 屬性類似，offsetHeight 屬性也將採用 8px 填充，內容的高度為 50px，邊框寬度為 1px 頂部和 1px 底部，總共 2px .因此，此屬性返回的總高度將為 8 + 50 + 2，即 60px。
3. scrollHeight
scrollHeight 返回內容的高度，包括由於溢位而在螢幕上不可見的內容。它只包括元素的內邊距，而不包括邊框、邊距或水平滾動條。
scrollHeight 類似於 clientHeight。clientHeight 和 scrollHeight 之間的唯一區別是 scrollheight 還可以包括內容的高度，由於溢位，當前在螢幕上不可見。
console.log(element.scrollHeight);
輸出：
58
內容的高度為 50px，總內邊距為 8px。因此，scrollHeight 屬性返回的總高度為 58px。
4. getBoundingClientRect()
getBoundingClientRect() 方法返回一個物件，該物件包含與元素的寬度和高度及其相對於視口的位置（x、y、頂部、左側等）相關的資訊。此方法計算的高度還包含填充和邊框。
console.log(element.getBoundingClientRect().height);
輸出：
60
因此，要從 getBoundingClientRect() 方法返回的物件中獲取元素的高度，我們必須使用 height 鍵來獲取高度。此處，元素高度為 50px，內邊距為 8px，邊框寬度為 2px。因此，此函式將返回總 60px 高度。
