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>
測(cè)試的時(shí)候記得機(jī)上jquery地址。
相關(guān)文章
基于JQuery實(shí)現(xiàn)仿網(wǎng)易郵箱全屏動(dòng)感滾動(dòng)插件fullPage
網(wǎng)易郵箱專題頁的效果相信很多朋友都看過，也許有很多朋友想著把自己的網(wǎng)站做成那樣動(dòng)感美妙的全屏滾動(dòng)效果，但苦于技術(shù)有限，只能望而生嘆。此刻您有福了，這款基于jquery的fullpage就可以輕松的幫你實(shí)現(xiàn)動(dòng)感美妙的全屏滾動(dòng)效果，需要的可以參考下2015-09-09
JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table中的排序分析
從上篇文章，我們實(shí)現(xiàn)了Table分頁代碼的高效性，咱們繼續(xù)沿著這個(gè)思路，探討Table表格數(shù)據(jù)中另外一個(gè)很常見的排序問題。說到排序，我記得在asp.net中 GridView中提供了這樣的方便，只需在展示字段上加上 Sorting 這樣的屬性，基本就完成了，剩下就是服務(wù)端cs代碼的寫法了。2010-01-01
JQuery 學(xué)習(xí)筆記01 JQuery初接觸
jQuery是一個(gè)Javascript庫，用于簡(jiǎn)化Web相關(guān)的Javascript開發(fā)2010-05-05
這篇文章主要介紹了jQuery中:submit選擇器用法,實(shí)例分析了:submit選擇器的功能、定義及匹配提交按鈕的使用技巧,需要的朋友可以參考下2015-01-01
jQuery移除tr無效的解決方法(tr是動(dòng)態(tài)添加)
移除掉某些tr（tr是動(dòng)態(tài)添加的）嘗試了很多方法，都不見效，后來發(fā)現(xiàn)個(gè)不錯(cuò)的方法，于是與大家分享下2014-09-09
js+JQuery返回頂部功能如何實(shí)現(xiàn)
很多網(wǎng)站上都有返回頂部的效果，本文闡述如何使用jquery實(shí)現(xiàn)返回頂部按鈕,需要的朋友可以參考下2012-12-12
jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證實(shí)例詳解
這篇文章主要介紹了jQuery使用$.ajax進(jìn)行即時(shí)驗(yàn)證的方法,以完整實(shí)例形式較為詳細(xì)的分析了jQuery前臺(tái)控制ajax交互與后臺(tái)asp.net響應(yīng)處理的詳細(xì)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-12-12
jQuery實(shí)現(xiàn)側(cè)浮窗與中浮窗切換效果的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)側(cè)浮窗與中浮窗切換效果的方法,涉及jQuery針對(duì)頁面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了JQ實(shí)現(xiàn)新浪游戲首頁幻燈片,需要的朋友可以參考下2015-07-07
JQuery中對(duì)服務(wù)器控件 DropdownList, RadioButtonList, CheckboxList的操作
JQuery中對(duì)服務(wù)器控件 DropdownList, RadioButtonList, CheckboxList的操作總結(jié)，需要的朋友可以參考下。2011-06-06