目录1. offsetHeight 属性（最常用）
2. clientHeight 属性3. getBoundingClientRect() 方法（最精确）
4. scrollHeight 属性
5. 通过计算样式获取（获取CSS定义的高度）
使用场景对比：
实际示例：
重要注意事项：
最佳实践：
在通过querySelector获取到元素（如按钮）后，有几种主要方法可以获取元素的高度：1. offsetHeight 属性（最常用）
获取元素的可视高度（包括内边距 + 边框 + 垂直滚动条，不包括外边距）
const button = document.querySelector('button');const height = button.offsetHeight; // 返回整数（像素值）
console.log('元素高度：', height, 'px');2. clientHeight 属性获取元素的内部高度（包括内边距，不包括边框、滚动条和外边距）
const height = button.clientHeight;3. getBoundingClientRect() 方法（最精确）
返回一个DOMRect对象，包含元素的精确尺寸和位置信息（包括小数像素值）
const rect = button.getBoundingClientRect();const height = rect.height; // 包含边框和内边距的高度console.log('精确高度：', height, 'px'); // 可能是小数
// 同时可以获取其他尺寸信息：console.log('宽度：', rect.width);console.log('顶部位置：', rect.top);4. scrollHeight 属性获取元素的完整内容高度（包括因溢出而不可见的部分）
const fullHeight = button.scrollHeight; // 适用于有滚动内容的元素
5. 通过计算样式获取（获取CSS定义的高度）
const style = window.getComputedStyle(button);const cssHeight = style.getPropertyValue('height'); // 返回字符串（如 "50px"）
// 转换为数值const numericHeight = parseFloat(cssHeight); // 50
使用场景对比：
方法包含内容是否包含滚动条返回值类型使用场景offsetHeight内容+内边距+边框是整数（像素）
最常用的可视高度clientHeight内容+内边距否整数（像素）
内部内容区域高度getBoundingClientRect().height内容+内边距+边框是小数（精确像素）
需要精确尺寸或位置时scrollHeight完整内容（包括隐藏部分）
-整数（像素）
测量有滚动内容的元素总高度style.height仅CSS定义的高度-字符串获取CSS原始值
实际示例：
重要注意事项：
布局时机问题：// 错误！元素可能还未渲染完成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转换单位：// 将带单位的值转为数字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));
根据需求选择合适的方法：
需要精确尺寸
（含小数）：
getBoundingClientRect()需要快速获取可视高度：offsetHeight需要内容区域高度：clientHeight需要包含隐藏内容的高度：scrollHeight以上就是JavaScript获取元素高度的几种方法的详细内容，更多关于JavaScript获取元素高度的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:JavaScript如何动态监听DOM元素高度详解js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法js获取Html元素的实际宽度高度的方法js获取页面及个元素高度、宽度的代码js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法