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