JS如何获取元素高度

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

---

📖 目录

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

---

一、原生JavaScript获取高度

1️⃣ offsetHeight ⭐ 最常用

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

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

const div = document.getElementById('myDiv');
const height = div.offsetHeight;

console.log(height); // 例如: 200px（数字类型，不带px）

2️⃣ clientHeight

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

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

const div = document.getElementById('myDiv');
const height = div.clientHeight;

console.log(height); // 例如: 198px（不含2px边框）

3️⃣ getBoundingClientRect().height

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

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

const div = document.getElementById('myDiv');
const height = div.getBoundingClientRect().height;

console.log(height); // 例如: 198.5px（精确值）

4️⃣ scrollHeight

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

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

const div = document.getElementById('myDiv');
const height = div.scrollHeight;

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

---

二、jQuery获取高度

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

1️⃣ .height() ⭐ 最常用

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

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

2️⃣ .innerHeight()

var h = $('#myDiv').innerHeight();

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

3️⃣ .outerHeight()

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

4️⃣ .css('height')

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

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

---

三、各方法对比 📊

方法	内容	Padding	Border	Margin	返回类型
JS offsetHeight	✅	✅	✅	❌	数字
JS clientHeight	✅	✅	❌	❌	数字
JS getBoundingClientRect().height	✅	✅	✅	❌	浮点数
JS scrollHeight	✅	✅	❌	❌	数字
jQuery .height()	✅	✅	✅	❌	数字
jQuery .innerHeight()	✅	✅	❌	❌	数字
jQuery .outerHeight()	✅	✅	✅	❌	数字
jQuery .outerHeight(true)	✅	✅	✅	✅	数字
jQuery .css('height')	✅	❌	❌	❌	字符串

---

四、实际应用场景 🎯

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

const div = document.getElementById('content');

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

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

function centerVertically() {
    const container = $('#container');
    const child = $('#child');
    
    const containerH = container.height();
    const childH = child.outerHeight();
    
    child.css('margin-top', (containerH - childH) / 2);
}

场景3：响应式布局

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

场景4：获取视口高度

// 原生JS
const viewportHeight = window.innerHeight;

// jQuery
const viewportHeight = $(window).height();

---

五、常见问题解决 🔧

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

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

解决：

// 方案1：放在DOM ready中
$(document).ready(function() {
    var h = $('#myDiv').height();
});

// 方案2：图片加载完成后获取
$('img').on('load', function() {
    var h = $(this).height();
});

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

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

解决：

// 使用 offsetHeight 代替
var h = document.getElementById('myDiv').offsetHeight;

// 或 jQuery
var h = $('#myDiv').height();

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

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

解决：

// 临时显示获取
const div = $('#myDiv');
div.show();
const h = div.height();
div.hide();

// 或使用 scrollHeight（即使隐藏也能获取）
const h = div[0].scrollHeight;

---

💡 总结：该用哪个？

需求	推荐方法
获取元素总高度（含边框）	.height() / offsetHeight ⭐
获取内容+内边距高度	.innerHeight() / clientHeight
获取包含margin的总高度	.outerHeight(true)
判断内容是否溢出	scrollHeight > clientHeight
获取精确浮点高度	getBoundingClientRect().height
获取CSS设置的高度值	.css('height')

---

🎁 一句话总结

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

---

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

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