首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript和jQuery获取元素高度

JavaScript和jQuery获取元素高度的各种方法

2026-05-15 08:19:55 作者：detayun

在前端开发中,获取元素高度是最基础也是最常用的操作之一,本文将详细介绍原生JavaScript 和 jQuery 中获取元素高度的各种方法,帮你彻底搞懂它们的区别,需要的朋友可以参考下

一、原生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！

以上就是JavaScript和jQuery获取元素高度的各种方法的详细内容，更多关于JavaScript和jQuery获取元素高度的资料请关注脚本之家其它相关文章！