JS如何获取元素高度

在前端开发中，获取元素高度是最基础也是最常用的操作之一。本文将详细介绍原生JavaScript和jQuery中获取元素高度的各种方法，帮你彻底搞懂它们的区别！

📖 目录

1. 原生JavaScript获取高度
2. jQuery获取高度
3. 各方法对比
4. 实际应用场景
5. 常见问题解决

一、原生JavaScript获取高度

1️⃣offsetHeight⭐ 最常用

获取元素的可见高度，包括：

• ✅ 内容高度（content）
• ✅ 内边距（padding）
• ✅ 边框（border）
• ❌ 不包括外边距（margin）

constdiv=document.getElementById('myDiv');constheight=div.offsetHeight;console.log(height);// 例如: 200px（数字类型，不带px）

2️⃣clientHeight

获取元素的内部高度，包括：

• ✅ 内容高度（content）
• ✅ 内边距（padding）
• ❌ 不包括边框（border）
• ❌ 不包括外边距（margin）

constdiv=document.getElementById('myDiv');constheight=div.clientHeight;console.log(height);// 例如: 198px（不含2px边框）

3️⃣getBoundingClientRect().height

获取元素的精确高度（浮点数），包括：

• ✅ 内容 + padding + border
• ✅ 返回精确到小数点的值

constdiv=document.getElementById('myDiv');constheight=div.getBoundingClientRect().height;console.log(height);// 例如: 198.5px（精确值）

4️⃣scrollHeight

获取元素的完整内容高度，包括：

• ✅ 内容高度（即使被隐藏/滚动）
• ✅ 内边距（padding）
• ❌ 不包括边框和外边距

constdiv=document.getElementById('myDiv');constheight=div.scrollHeight;// 常用于判断内容是否溢出if(div.scrollHeight>div.clientHeight){console.log('内容溢出了！需要滚动');}

二、jQuery获取高度

jQuery提供了更简洁的API，底层其实还是调用原生方法。

1️⃣.height()⭐ 最常用

varh=$('#myDiv').height();console.log(h);// 200（数字类型）

等价于原生的offsetHeight（不含margin）

2️⃣.innerHeight()

varh=$('#myDiv').innerHeight();

等价于原生的clientHeight（含padding，不含border）

3️⃣.outerHeight()

varh=$('#myDiv').outerHeight();// 含padding + bordervarh=$('#myDiv').outerHeight(true);// 含padding + border + margin

4️⃣.css('height')

varh=$('#myDiv').css('height');console.log(h);// "200px"（字符串类型，带px）

⚠️注意：返回的是字符串，需要解析才能计算！

三、各方法对比 📊

四、实际应用场景 🎯

场景1：判断内容是否溢出

constdiv=document.getElementById('content');if(div.scrollHeight>div.clientHeight){console.log('内容溢出，需要滚动条');div.style.overflowY='auto';}

场景2：居中对齐（垂直居中）

functioncenterVertically(){constcontainer=$('#container');constchild=$('#child');constcontainerH=container.height();constchildH=child.outerHeight();child.css('margin-top',(containerH-childH)/2);}

场景3：响应式布局

$(window).resize(function(){constwindowH=$(window).height();constheaderH=$('#header').outerHeight();$('#main').css('height',windowH-headerH-50);});

场景4：获取视口高度

// 原生JSconstviewportHeight=window.innerHeight;// jQueryconstviewportHeight=$(window).height();

五、常见问题解决 🔧

❌ 问题1：获取的高度为0

原因：元素还没渲染完成就获取了

解决：

// 方案1：放在DOM ready中$(document).ready(function(){varh=$('#myDiv').height();});// 方案2：图片加载完成后获取$('img').on('load',function(){varh=$(this).height();});

❌ 问题2：.css('height')返回 “auto”

原因：元素高度由内容撑开，没有显式设置

解决：

// 使用 offsetHeight 代替varh=document.getElementById('myDiv').offsetHeight;// 或 jQueryvarh=$('#myDiv').height();

❌ 问题3：隐藏元素获取高度为0

原因：display: none的元素无法获取可视高度

解决：

// 临时显示获取constdiv=$('#myDiv');div.show();consth=div.height();div.hide();// 或使用 scrollHeight（即使隐藏也能获取）consth=div[0].scrollHeight;

💡 总结：该用哪个？

🎁 一句话总结

日常开发用.height()最方便，需要精确计算用原生offsetHeight，判断溢出用scrollHeight！

觉得有用？点赞收藏不迷路 ❤️

有问题欢迎评论区交流！💬