标准浏览器下：
height:高度
innerHeight:高度＋补白
outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距
html代码：
复制代码 代码如下:
复制代码
<div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
<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));
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="width: 150px;height: 41px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
<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]
结果：
在ie中的结果：17px，37px，41px，61px
在ff中的结果：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>
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
[html]
结果：
在ie中的结果：17px，37px，41px，61px
在ff中的结果：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));
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="width: 150px;height: 60px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
<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));
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
最后
以上就是愤怒鸡最近收集整理的关于jQuery中的height innerHeight outerHeight区别示例介绍的全部内容，更多相关jQuery中的height内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复