jQuery height()、innerHeight()、outerHeight()函數(shù)的區(qū)別詳解
在jQuery中，獲取元素高度的函數(shù)有3個(gè)，它們分別是height()、 innerHeight()、 outerHeight()。
與此相對(duì)應(yīng)的是，獲取元素寬度的函數(shù)也有3個(gè)，它們分別是width()、 innerWidth()、 outerWidth()。
在這里，我們以height()、innerHeight()、outerHeight()3個(gè)函數(shù)為例，來詳細(xì)介紹它們之間的區(qū)別。
下面我們以元素element的盒模型為例來介紹它們之間的區(qū)別。
| 函數(shù) | 高度范圍 | jQuery版本 | 支持寫操作 |
|---|---|---|---|
height() |
height | 1.0+ |
1.0+ |
innerHeight() |
height + padding | 1.2.6+ | 1.8.0+ |
outerHeight() |
height + padding + border | 1.2.6+ | 否 |
outerHeight(true) |
height+padding+border+margin | 1.2.6+ | 否 |
1、 只有height()函數(shù)可用于window或document對(duì)象。
2、 "支持寫操作"表示該函數(shù)可以為元素設(shè)置高度值。
3、 1.4.1+ height()新增支持參數(shù)為函數(shù)(之前只支持?jǐn)?shù)值)。
4、 1.8.0+ innerHeight()支持參數(shù)為數(shù)值或函數(shù)。
現(xiàn)在，我們參考以下HTML + jQuery示例代碼：
<div id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div>
<script type="text/javascript">
var $ele = $("#element");
// height() = height(100) = 100
document.writeln( $ele.height() ); // 100
// innerHeight() = height(100) + padding(10*2)= 120
document.writeln( $ele.innerHeight() ); // 120
// outerHeight() = height(100) + padding(10*2) + border(1*2) = 122
document.writeln( $ele.outerHeight() ); // 122
// outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132
document.writeln( $ele.outerHeight(true) ); // 132
</script>
測試的時(shí)候記得機(jī)上jquery地址。
相關(guān)文章
在網(wǎng)上一直找不到j(luò)query上傳圖片的例子,今天由于工作需要,在網(wǎng)上找了很長時(shí)間,找到了一個(gè)不太完整的例子,自已又對(duì)其進(jìn)行了修改,現(xiàn)在已經(jīng)可以使用,但只限于IE,火狐下不能使用,因?yàn)榛鸷碌貌坏奖镜厣蟼鞯膱D片路徑,希望能對(duì)新手有所幫助.2010-01-01
jQuery時(shí)間驗(yàn)證和轉(zhuǎn)換為標(biāo)準(zhǔn)格式的時(shí)間格式
本篇文章主要介紹了jQuery時(shí)間驗(yàn)證和轉(zhuǎn)換為標(biāo)準(zhǔn)格式的時(shí)間示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-03-03
本文搜集了大量 jQuery 表格插件，幫助 Web 設(shè)計(jì)者更好地駕御 HTML 表格，你可以對(duì)表格進(jìn)行橫向和豎向排序，設(shè)置固定表頭，對(duì)表格進(jìn)行搜索，對(duì)大表格進(jìn)行分頁，對(duì)表格進(jìn)行滾動(dòng)，拖放操作等等。這些插件很多都包含詳細(xì)的教程。2010-04-04
jquery實(shí)現(xiàn)具有嵌套功能的選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)具有嵌套功能的選項(xiàng)卡的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶右側(cè)索引功能的通訊錄,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁面元素動(dòng)態(tài)遍歷、排序等相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)輪播圖源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
鋒利的jQuery 要點(diǎn)歸納（三） jQuery中的事件和動(dòng)畫（上：事件篇）
鋒利的jQuery 要點(diǎn)歸納 jQuery中的事件和動(dòng)畫（上：事件篇）2010-03-03
jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果簡單示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果,結(jié)合實(shí)例形式分析了jQuery上傳圖片本地預(yù)覽所涉及的相關(guān)頁面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03
jquery插件jTimer(jquery定時(shí)器)使用方法
很多時(shí)候我們需要按時(shí)間間隔執(zhí)行一個(gè)任務(wù),當(dāng)滿足一定條件時(shí)停止執(zhí)行.此插件旨在解決這一經(jīng)常遇到的問題2013-12-12
這篇文章主要為大家詳細(xì)介紹了jquery validate表單驗(yàn)證插件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09