在 JavaScript 中獲取 div 元素的高度

在瀏覽器中的 JavaScript 裡取得 <div> 元素的高度時，先選取該元素，再依需求讀取合適的測量值：clientHeight 取得內部高度，offsetHeight 取得包含邊框的高度，scrollHeight 取得包含溢出內容的高度，getBoundingClientRect().height 則取得元素實際呈現的矩形高度。這些屬性測量的是元素的不同部分，因此數值可能不同。

下方可執行範例會模擬內容高度為 50px、上下各有 4px 內距及 1px 邊框的方框。範例在沒有瀏覽器 DOM 的 Node 中執行，並印出相應的測量值。在瀏覽器中，請從選取的 DOM 元素讀取相同屬性。

const element = {
  contentHeight: 50,
  padding: 4,
  border: 1,
  get clientHeight() {
    return this.contentHeight + 2 * this.padding;
  },
  get offsetHeight() {
    return this.clientHeight + 2 * this.border;
  },
  get scrollHeight() {
    return this.clientHeight;
  },
  getBoundingClientRect() {
    return { height: this.offsetHeight };
  }
};

console.log('clientHeight:', element.clientHeight);
console.log('offsetHeight:', element.offsetHeight);
console.log('scrollHeight:', element.scrollHeight);
console.log('bounding height:', element.getBoundingClientRect().height);

clientHeight: 58
offsetHeight: 60
scrollHeight: 58
bounding height: 60

在 JavaScript 中測量 div 的高度

使用 DOM 依 ID 選取現有元素，再從下列測量方式中選擇一種。上方的 Node 範例會模擬指定方框的測量結果；測量自己的頁面時，請將 element 換成 document.getElementById('container') 或其他選取器的結果。等元素已加入文件且版面配置完成後，再讀取尺寸。

依照需要測量的方框部分選擇方法：要取得內部高度，使用 clientHeight；結果需包含邊框時，使用 offsetHeight；需要取得包含溢出內容的完整高度以供捲動時，使用 scrollHeight；需要元素實際呈現的矩形高度時，使用 getBoundingClientRect().height。這些值都不包含外距；若計算需要考慮間距，請另外測量相關的版面間隔。這些值的單位是 CSS 像素，而非螢幕實體像素。

clientHeight

clientHeight 是以 CSS 像素表示的內部高度，包含上、下內距，但不包含邊框與外距。範例中的內容高度為 50px，上下內距各為 4px，因此結果是 58。此屬性回傳整數。

offsetHeight

offsetHeight 包含元素的內容、內距、邊框，以及任何水平捲軸，但不包含外距。範例的計算方式是 50 + 8 + 2 = 60 像素。此屬性也回傳整數。

scrollHeight

scrollHeight 測量內容的完整高度；內容溢出時，也會包含超出可視區域的部分。它包含內距，但不包含邊框與外距。範例沒有內容溢出的情況，因此結果是 58；若頁面內容溢出，結果可能大於 clientHeight。這是整數測量值，而且不應假設它在所有版面配置中都等於 clientHeight。

getBoundingClientRect()

getBoundingClientRect() 會回傳描述元素相對於視窗的呈現尺寸與位置的矩形。讀取其中的 height 屬性即可取得呈現高度。它包含內距與邊框，因此範例測得 60 像素。與上述回傳整數的尺寸屬性不同，此高度可能是小數，例如版面配置或變形造成次像素尺寸時。當你需要的是呈現後的矩形，而非可捲動的內容高度時，請使用此方法。