在 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 高度。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn