jQuery中的height innerHeight outerHeight区别示例介绍

2019/6/29 22:36:43

编程Tag： height innerHeight outerHeight

本文主要是介绍jQuery中的height innerHeight outerHeight区别示例介绍，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

标准浏览器下：

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> 

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="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> 

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="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)); 

结果：
在ie中的结果：36px，56px，60px，80px
在ff中的结果：60px，80px，84px，104px

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

这篇关于jQuery中的height innerHeight outerHeight区别示例介绍的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery中的height innerHeight outerHeight区别示例介绍

相关编程文章