jQuery中的height innerHeight outerHeight區(qū)別示例介紹
更新時間：2014年06月15日 17:24:36 投稿：whsnow
這篇文章主要介紹了jQuery中的height innerHeight outerHeight的區(qū)別,需要的朋友可以參考下
標準瀏覽器下：
height:高度
innerHeight:高度＋補白
outerHeight:高度＋補白＋邊框，參數(shù)為true時：高度＋補白＋邊框＋邊距
html代碼：
<div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代碼：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
結(jié)果：
在ie中的結(jié)果：17px，37px，41px，61px
在ff中的結(jié)果：20px，40px，44px，64px
html代碼：
<div class="width: 150px;height: 41px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代碼：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
[html]
結(jié)果：
在ie中的結(jié)果：17px，37px，41px，61px
在ff中的結(jié)果：41px，61px，65px，85px
html代碼：
[code]
<div class="width: 150px;height: 42px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代碼：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
結(jié)果：
在ie中的結(jié)果：18px，38px，42px，62px
在ff中的結(jié)果：42px，62px，66px，86px
html代碼：
<div class="width: 150px;height: 60px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代碼：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
結(jié)果：
在ie中的結(jié)果：36px，56px，60px，80px
在ff中的結(jié)果：60px，80px，84px，104px
結(jié)論：在ie中height包含border和padding并且height最小值為17px ，同理可得width，不過它最小值為15px
height:高度
innerHeight:高度＋補白
outerHeight:高度＋補白＋邊框，參數(shù)為true時：高度＋補白＋邊框＋邊距
html代碼：
復制代碼 代碼如下:
<div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代碼：
復制代碼 代碼如下:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
結(jié)果：
在ie中的結(jié)果：17px，37px，41px，61px
在ff中的結(jié)果：20px，40px，44px，64px
html代碼：
復制代碼 代碼如下:
<div class="width: 150px;height: 41px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代碼：
復制代碼 代碼如下:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
[html]
結(jié)果：
在ie中的結(jié)果：17px，37px，41px，61px
在ff中的結(jié)果：41px，61px，65px，85px
html代碼：
[code]
<div class="width: 150px;height: 42px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代碼：
復制代碼 代碼如下:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
結(jié)果：
在ie中的結(jié)果：18px，38px，42px，62px
在ff中的結(jié)果：42px，62px，66px，86px
html代碼：
復制代碼 代碼如下:
<div class="width: 150px;height: 60px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代碼：
復制代碼 代碼如下:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
結(jié)果：
在ie中的結(jié)果：36px，56px，60px，80px
在ff中的結(jié)果：60px，80px，84px，104px
結(jié)論：在ie中height包含border和padding并且height最小值為17px ，同理可得width，不過它最小值為15px
相關(guān)文章
這篇文章主要介紹了jquery插件格式,結(jié)合實例形式簡單分析了jQuery插件的結(jié)構(gòu)與開發(fā)技巧,并附帶了一本相關(guān)電子書供讀者下載參考,需要的朋友可以參考下2016-06-06
jquery判斷RadioButtonList和RadioButton中是否有選中項示例
用jquery判斷RadioButtonList和RadioButton中是否有選中項，下面有個不錯的示例，感興趣的朋友可以參考下2013-09-09
$(function() {});是$(document).ready(function(){ })的簡寫，最早接觸的時候也說$(document).ready(function(){ })這個函數(shù)是用來取代頁面中的window.onload;但是今天發(fā)現(xiàn) 好像不是這樣回事！是在做一個頁面載入效果時發(fā)現(xiàn)的！2015-08-08
當有大量的內(nèi)容或者圖片需要在你的網(wǎng)站或者BLOG上展示的時候，以幻燈片滑動的方式是一個不錯的選擇，這種效果常用于公司網(wǎng)站或者個人BLOG。2010-10-10
動態(tài)加載js和css的jquery，可用于在生成頁面時通過js函數(shù)加載一些共通的js和css文件,需要的朋友可以參考下2014-09-09
本篇文章主要介紹了jQuery控制元素隱藏和顯示的相關(guān)知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
下面小編就為大家?guī)硪黄獪\談jquery中ajax跨域提交的時候會有2次請求的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Iframe實現(xiàn)跨瀏覽器自適應高度解決方法,通過父層容器的應用來實現(xiàn)這一功能,非常實用的一個技巧,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了jQuery Validate表單驗證入門知識，該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API，感興趣的小伙伴們可以參考一下2015-12-12
基于jquery的滾動鼠標放大縮小圖片效果，需要的朋友可以參考下。2011-10-10