JavaScript和jQuery獲取元素高度的各種方法
更新時(shí)間：2026年05月15日 08:19:55 作者：detayun
在前端開發(fā)中,獲取元素高度是最基礎(chǔ)也是最常用的操作之一,本文將詳細(xì)介紹 原生JavaScript 和 jQuery 中獲取元素高度的各種方法,幫你徹底搞懂它們的區(qū)別,需要的朋友可以參考下
一、原生JavaScript獲取高度
1、offsetHeight 最常用
獲取元素的可見高度，包括：
- ? 內(nèi)容高度（content）
- ? 內(nèi)邊距（padding）
- ? 邊框（border）
- ? 不包括外邊距（margin）
const div = document.getElementById('myDiv');
const height = div.offsetHeight;
console.log(height); // 例如: 200px（數(shù)字類型，不帶px）
2、clientHeight
獲取元素的內(nèi)部高度，包括：
- ? 內(nèi)容高度（content）
- ? 內(nèi)邊距（padding）
- ? 不包括邊框（border）
- ? 不包括外邊距（margin）
const div = document.getElementById('myDiv');
const height = div.clientHeight;
console.log(height); // 例如: 198px（不含2px邊框）
3、getBoundingClientRect().height
獲取元素的精確高度（浮點(diǎn)數(shù)），包括：
- ? 內(nèi)容 + padding + border
- ? 返回精確到小數(shù)點(diǎn)的值
const div = document.getElementById('myDiv');
const height = div.getBoundingClientRect().height;
console.log(height); // 例如: 198.5px（精確值）
4、scrollHeight
獲取元素的完整內(nèi)容高度，包括：
- ? 內(nèi)容高度（即使被隱藏/滾動(dòng)）
- ? 內(nèi)邊距（padding）
- ? 不包括邊框和外邊距
const div = document.getElementById('myDiv');
const height = div.scrollHeight;
// 常用于判斷內(nèi)容是否溢出
if (div.scrollHeight > div.clientHeight) {
console.log('內(nèi)容溢出了！需要滾動(dòng)');
}
二、jQuery獲取高度
jQuery提供了更簡(jiǎn)潔的API，底層其實(shí)還是調(diào)用原生方法。
1、.height()最常用
var h = $('#myDiv').height();
console.log(h); // 200（數(shù)字類型）
等價(jià)于原生的 offsetHeight（不含margin）
2、.innerHeight()
var h = $('#myDiv').innerHeight();
等價(jià)于原生的 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）
注意：返回的是字符串，需要解析才能計(jì)算！
三、各方法對(duì)比
| 方法 | 內(nèi)容 | Padding | Border | Margin | 返回類型 |
|---|---|---|---|---|---|
JS offsetHeight | ? | ? | ? | ? | 數(shù)字 |
JS clientHeight | ? | ? | ? | ? | 數(shù)字 |
JS getBoundingClientRect().height | ? | ? | ? | ? | 浮點(diǎn)數(shù) |
JS scrollHeight | ? | ? | ? | ? | 數(shù)字 |
jQuery .height() | ? | ? | ? | ? | 數(shù)字 |
jQuery .innerHeight() | ? | ? | ? | ? | 數(shù)字 |
jQuery .outerHeight() | ? | ? | ? | ? | 數(shù)字 |
jQuery .outerHeight(true) | ? | ? | ? | ? | 數(shù)字 |
jQuery .css('height') | ? | ? | ? | ? | 字符串 |
四、實(shí)際應(yīng)用場(chǎng)景
場(chǎng)景1：判斷內(nèi)容是否溢出
const div = document.getElementById('content');
if (div.scrollHeight > div.clientHeight) {
console.log('內(nèi)容溢出，需要滾動(dòng)條');
div.style.overflowY = 'auto';
}
場(chǎng)景2：居中對(duì)齊（垂直居中）
function centerVertically() {
const container = $('#container');
const child = $('#child');
const containerH = container.height();
const childH = child.outerHeight();
child.css('margin-top', (containerH - childH) / 2);
}
場(chǎng)景3：響應(yīng)式布局
$(window).resize(function() {
const windowH = $(window).height();
const headerH = $('#header').outerHeight();
$('#main').css('height', windowH - headerH - 50);
});
場(chǎng)景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”
原因：元素高度由內(nèi)容撐開，沒有顯式設(shè)置
解決：
// 使用 offsetHeight 代替
var h = document.getElementById('myDiv').offsetHeight;
// 或 jQuery
var h = $('#myDiv').height();
問題3：隱藏元素獲取高度為0
原因：display: none 的元素?zé)o法獲取可視高度
解決：
// 臨時(shí)顯示獲取
const div = $('#myDiv');
div.show();
const h = div.height();
div.hide();
// 或使用 scrollHeight（即使隱藏也能獲?。?
const h = div[0].scrollHeight;
總結(jié)：該用哪個(gè)？
| 需求 | 推薦方法 |
|---|---|
| 獲取元素總高度（含邊框） | .height() / offsetHeight ? |
| 獲取內(nèi)容+內(nèi)邊距高度 | .innerHeight() / clientHeight |
| 獲取包含margin的總高度 | .outerHeight(true) |
| 判斷內(nèi)容是否溢出 | scrollHeight > clientHeight |
| 獲取精確浮點(diǎn)高度 | getBoundingClientRect().height |
| 獲取CSS設(shè)置的高度值 | .css('height') |
一句話總結(jié)
日常開發(fā)用 .height() 最方便，需要精確計(jì)算用原生 offsetHeight，判斷溢出用 scrollHeight！
以上就是JavaScript和jQuery獲取元素高度的各種方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript和jQuery獲取元素高度的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能示例
這篇文章主要介紹了ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能,結(jié)合實(shí)例形式分析了ES6中Set數(shù)據(jù)結(jié)構(gòu)的相關(guān)函數(shù)與實(shí)現(xiàn)數(shù)組交集、并集、差集的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
基于VSCode調(diào)試網(wǎng)頁(yè)JavaScript代碼過程詳解
這篇文章主要介紹了基于VSCode調(diào)試網(wǎng)頁(yè)JavaScript代碼過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
JavaScript中參數(shù)傳遞方式包括按值傳遞、按引用傳遞、參數(shù)解構(gòu)傳遞、Rest參數(shù)傳遞、回調(diào)函數(shù)傳遞、閉包傳遞、模板字符串傳遞和高階函數(shù)傳遞,每種方式都有其特點(diǎn)和適用場(chǎng)景,選擇合適的傳遞方式可以提高代碼的可讀性、可維護(hù)性和靈活性,感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了微信小程序表單驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了微信小程序完成表單驗(yàn)證功能所涉及的視圖與邏輯操作技巧,需要的朋友可以參考下2017-12-12
javascript實(shí)現(xiàn)禁止復(fù)制網(wǎng)頁(yè)內(nèi)容匯總
本文給大家匯總介紹了幾種使用javascript和CSS實(shí)現(xiàn)禁止復(fù)制頁(yè)面內(nèi)容的方法，非常的實(shí)用，有需要的小伙伴可以參考下。2015-12-12
javascript適合移動(dòng)端的日期時(shí)間拾取器
這篇文章主要介紹了javascript適合移動(dòng)端的日期時(shí)間拾取器，提供了友好的日期和時(shí)間選擇操作界面，需要的朋友可以參考下2015-11-11
uniapp使用webview調(diào)用谷歌地圖的完整過程(小程序+app端)
最近在做uni-app的項(xiàng)目,由于是海外市場(chǎng),所以在APP中需要使用到谷歌地圖,這篇文章主要介紹了uniapp使用webview調(diào)用谷歌地圖(小程序+app端)的相關(guān)資料,需要的朋友可以參考下2025-07-07
這篇文章主要為大家詳細(xì)介紹了Next.js中處理時(shí)區(qū)的幾種常用方案推薦,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-01-01
本文主要介紹了js遞歸和定時(shí)器的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
在 ES5 中，類的繼承可以有多種方式，然而過多的選擇有時(shí)反而會(huì)成為障礙，ES6 統(tǒng)了類繼承的寫法，避免開發(fā)者在不同寫法的細(xì)節(jié)之中過多糾纏，但在介紹新方法之前，還是有必要先回顧下ES5中類的繼承方式2022-08-08