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