快捷導(dǎo)航

jQuery中的height innerHeight outerHeight區(qū)別示例介紹

更新時間：2014年06月15日 17:24:36 投稿：whsnow

這篇文章主要介紹了jQuery中的height innerHeight outerHeight的區(qū)別,需要的朋友可以參考下

標(biāo)準(zhǔn)瀏覽器下：

height:高度

innerHeight:高度＋補(bǔ)白
outerHeight:高度＋補(bǔ)白＋邊框，參數(shù)為true時：高度＋補(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代碼：

復(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，不過它最小值為15px

您可能感興趣的文章: