jQuery height()、innerHeight()、outerHeight()函數(shù)的區(qū)別詳解
更新時間：2016年05月23日 23:29:10 投稿：mdxy-dxy
這篇文章主要介紹了jQuery height()、innerHeight()、outerHeight()函數(shù)的區(qū)別詳解,需要的朋友可以參考下
在jQuery中，獲取元素高度的函數(shù)有3個，它們分別是height()、 innerHeight()、 outerHeight()。
與此相對應(yīng)的是，獲取元素寬度的函數(shù)也有3個，它們分別是width()、 innerWidth()、 outerWidth()。
在這里，我們以height()、innerHeight()、outerHeight()3個函數(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對象。
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>
測試的時候記得機上jquery地址。
相關(guān)文章
在網(wǎng)上一直找不到j(luò)query上傳圖片的例子,今天由于工作需要,在網(wǎng)上找了很長時間,找到了一個不太完整的例子,自已又對其進行了修改,現(xiàn)在已經(jīng)可以使用,但只限于IE,火狐下不能使用,因為火狐下得不到本地上傳的圖片路徑,希望能對新手有所幫助.2010-01-01
jQuery時間驗證和轉(zhuǎn)換為標(biāo)準(zhǔn)格式的時間格式
本篇文章主要介紹了jQuery時間驗證和轉(zhuǎn)換為標(biāo)準(zhǔn)格式的時間示例代碼，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
本文搜集了大量 jQuery 表格插件，幫助 Web 設(shè)計者更好地駕御 HTML 表格，你可以對表格進行橫向和豎向排序，設(shè)置固定表頭，對表格進行搜索，對大表格進行分頁，對表格進行滾動，拖放操作等等。這些插件很多都包含詳細(xì)的教程。2010-04-04
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)具有嵌套功能的選項卡的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-02-02
jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄示例【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)帶右側(cè)索引功能的通訊錄,結(jié)合實例形式分析了jQuery針對頁面元素動態(tài)遍歷、排序等相關(guān)操作技巧,并附源碼供讀者下載參考,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)輪播圖源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
鋒利的jQuery 要點歸納（三） jQuery中的事件和動畫（上：事件篇）
鋒利的jQuery 要點歸納 jQuery中的事件和動畫（上：事件篇）2010-03-03
jQuery實現(xiàn)的上傳圖片本地預(yù)覽效果簡單示例
這篇文章主要介紹了jQuery實現(xiàn)的上傳圖片本地預(yù)覽效果,結(jié)合實例形式分析了jQuery上傳圖片本地預(yù)覽所涉及的相關(guān)頁面元素屬性動態(tài)操作實現(xiàn)技巧,需要的朋友可以參考下2018-03-03
很多時候我們需要按時間間隔執(zhí)行一個任務(wù),當(dāng)滿足一定條件時停止執(zhí)行.此插件旨在解決這一經(jīng)常遇到的問題2013-12-12
這篇文章主要為大家詳細(xì)介紹了jquery validate表單驗證插件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09