快捷導(dǎo)航

JavaScript獲取元素高度的幾種方法

更新時(shí)間：2025年06月17日 11:26:27 作者：BillKu

在JavaScript中,我們經(jīng)常需要獲取元素的樣式信息,比如元素的寬度、高度、顏色等,下面將介紹幾種常用的方法來獲取元素的高度信息,需要的朋友可以參考下

1. offsetHeight 屬性（最常用）

獲取元素的可視高度（包括內(nèi)邊距 + 邊框 + 垂直滾動(dòng)條，不包括外邊距）

const button = document.querySelector('button');
const height = button.offsetHeight; // 返回整數(shù)（像素值）
console.log('元素高度：', height, 'px');

2. clientHeight 屬性

獲取元素的內(nèi)部高度（包括內(nèi)邊距，不包括邊框、滾動(dòng)條和外邊距）

const height = button.clientHeight;

3. getBoundingClientRect() 方法（最精確）

返回一個(gè) DOMRect 對象，包含元素的精確尺寸和位置信息（包括小數(shù)像素值）

const rect = button.getBoundingClientRect();
const height = rect.height; // 包含邊框和內(nèi)邊距的高度
console.log('精確高度：', height, 'px'); // 可能是小數(shù)

// 同時(shí)可以獲取其他尺寸信息：
console.log('寬度：', rect.width);
console.log('頂部位置：', rect.top);

4. scrollHeight 屬性

獲取元素的完整內(nèi)容高度（包括因溢出而不可見的部分）

const fullHeight = button.scrollHeight; // 適用于有滾動(dòng)內(nèi)容的元素

5. 通過計(jì)算樣式獲?。ǐ@取CSS定義的高度）

const style = window.getComputedStyle(button);
const cssHeight = style.getPropertyValue('height'); // 返回字符串（如 "50px"）

// 轉(zhuǎn)換為數(shù)值
const numericHeight = parseFloat(cssHeight); // 50

使用場景對比：

方法	包含內(nèi)容	是否包含滾動(dòng)條	返回值類型	使用場景
offsetHeight	內(nèi)容+內(nèi)邊距+邊框	是	整數(shù)（像素）	最常用的可視高度
clientHeight	內(nèi)容+內(nèi)邊距	否	整數(shù)（像素）	內(nèi)部內(nèi)容區(qū)域高度
getBoundingClientRect().height	內(nèi)容+內(nèi)邊距+邊框	是	小數(shù)（精確像素）	需要精確尺寸或位置時(shí)
scrollHeight	完整內(nèi)容（包括隱藏部分）	-	整數(shù)（像素）	測量有滾動(dòng)內(nèi)容的元素總高度
style.height	僅CSS定義的高度	-	字符串	獲取CSS原始值

實(shí)際示例：

<button id="myBtn" style="padding: 10px; border: 2px solid; margin: 5px;">
  點(diǎn)擊我
</button>

<script>
  const btn = document.querySelector('#myBtn');
  
  // 方法1: offsetHeight (內(nèi)容高度 + 內(nèi)邊距20px + 邊框4px)
  console.log('offsetHeight:', btn.offsetHeight); // 例如 44
  
  // 方法2: clientHeight (內(nèi)容高度 + 內(nèi)邊距20px)
  console.log('clientHeight:', btn.clientHeight); // 例如 40
  
  // 方法3: getBoundingClientRect()
  const rect = btn.getBoundingClientRect();
  console.log('精確高度:', rect.height); // 例如 44.5
  
  // 方法4: 獲取CSS定義的高度
  const cssHeight = window.getComputedStyle(btn).height;
  console.log('CSS高度:', cssHeight); // "auto" 或具體值
</script>

重要注意事項(xiàng)：

布局時(shí)機(jī)問題：

// 錯(cuò)誤！元素可能還未渲染完成
const unrenderedBtn = document.querySelector('button');
console.log(unrenderedBtn.offsetHeight); // 可能返回0

// 正確：在DOM加載完成后獲取
window.addEventListener('DOMContentLoaded', () => {
  const btn = document.querySelector('button');
  console.log(btn.offsetHeight); // 正確高度
});

隱藏元素的高度為0：

btn.style.display = 'none';
console.log(btn.offsetHeight); // 返回0

轉(zhuǎn)換單位：

// 將帶單位的值轉(zhuǎn)為數(shù)字
const cssHeight = "50px";
const heightValue = parseFloat(cssHeight); // 50

最佳實(shí)踐：

// 推薦組合使用
function getElementHeight(element) {
  if (!element) return 0;
  
  // 優(yōu)先使用精確測量
  const rect = element.getBoundingClientRect();
  if (rect.height > 0) return rect.height;
  
  // 回退方案
  return element.offsetHeight || 0;
}

// 使用示例
const btn = document.querySelector('button');
console.log('按鈕高度:', getElementHeight(btn));

根據(jù)需求選擇合適的方法：