Jquery中的 height(), innerHeight() outerHeight()区别

jQuery中的 height innerHeight outerHeight区别


标准浏览器下：

height:高度

innerHeight:高度＋补白

outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距

html代码： 

<div class=" 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));  
结果：  
在ie中的结果：17px，37px，41px，61px  
在ff中的结果：20px，40px，44px，64px  

html代码：  
<div class=" 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));  
结果：  
在ie中的结果：17px，37px，41px，61px  
在ff中的结果：41px，61px，65px，85px  

html代码：  
<div class=" 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));  
结果：  
在ie中的结果：18px，38px，42px，62px  
在ff中的结果：42px，62px，66px，86px  

html代码：  
<div class=" 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));  
结果：  
在ie中的结果：36px，56px，60px，80px  
在ff中的结果：60px，80px，84px，104px  

结论：在ie中height包含border和padding并且height最小值为17px ，同理可得width，不过它最小值为15px 

 原文：http://jquery01.diandian.com/post/2012-01-17/15012978