JavaScript获取元素高度的几种方法

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

const height = button.clientHeight;

const rect = button.getBoundingClientRect();
const height = rect.height; // 包含边框和内边距的高度
console.log('精确高度：', height, 'px'); // 可能是小数

// 同时可以获取其他尺寸信息：
console.log('宽度：', rect.width);
console.log('顶部位置：', rect.top);

const fullHeight = button.scrollHeight; // 适用于有滚动内容的元素

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

// 转换为数值
const numericHeight = parseFloat(cssHeight); // 50

<button id="myBtn" style="padding: 10px; border: 2px solid; margin: 5px;">
  点击我
</button>

<script>
  const btn = document.querySelector('#myBtn');
  
  // 方法1: offsetHeight (内容高度 + 内边距20px + 边框4px)
  console.log('offsetHeight:', btn.offsetHeight); // 例如 44
  
  // 方法2: clientHeight (内容高度 + 内边距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>

// 错误！元素可能还未渲染完成
const unrenderedBtn = document.querySelector('button');
console.log(unrenderedBtn.offsetHeight); // 可能返回0

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

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

// 将带单位的值转为数字
const cssHeight = "50px";
const heightValue = parseFloat(cssHeight); // 50

// 推荐组合使用
function getElementHeight(element) {
  if (!element) return 0;
  
  // 优先使用精确测量
  const rect = element.getBoundingClientRect();
  if (rect.height > 0) return rect.height;
  
  // 回退方案
  return element.offsetHeight || 0;
}

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