A-A+

深入分析jQuery height()、innerHeight()、outerHeight()函数的区别

2016年01月11日 web前端设计 暂无评论 阅读 4 views 次

我们先看三个函数的名称height()、innerHeight()、outerHeight(),高度与内高与外高了,这个与css中的padding与margin有那么一点像了,下面一起来看看。

在jQuery中,获取元素高度的函数有3个,它们分别是height()、 innerHeight()、 outerHeight()。

与此相对应的是,获取元素宽度的函数也有3个,它们分别是width()、 innerWidth()、 outerWidth()。

在这里,我们以height()、innerHeight()、outerHeight()3个函数为例,来详细介绍它们之间的区别。

下面我们以元素element的盒模型为例来介绍它们之间的区别。

css-box-model-diagram.png

函数 高度范围 jQuery版本 支持写操作

height() height 1.0+

1.0+

innerHeight() height + padding 1.2.6+ 1.8.0+

outerHeight() height + padding + border 1.2.6+ 否

outerHeight(true) height+padding+border+margin 1.2.6+ 否

1、只有height()函数可用于window或document对象。

2、"支持写操作"表示该函数可以为元素设置高度值。

3、1.4.1+ height()新增支持参数为函数(之前只支持数值)。

4、1.8.0+ innerHeight()支持参数为数值或函数。

  1. <div id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div>   
  2. <script type="text/javascript">   
  3. var $ele = $("#element");   
  4.    
  5. // height() = height(100) = 100   
  6. document.writeln( $ele.height() ); // 100   
  7.    
  8. // innerHeight() = height(100) + padding(10*2)= 120    
  9. document.writeln( $ele.innerHeight() ); // 120   
  10.    
  11. // outerHeight() = height(100) + padding(10*2) + border(1*2) = 122    
  12. document.writeln( $ele.outerHeight() ); // 122   
  13.    
  14. // outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132    
  15. document.writeln( $ele.outerHeight(true) ); // 132   
  16. </script>  

补充:

标准浏览器下:

height:高度

innerHeight:高度+补白

outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距

html代码:

jjjjj

js代码:

  1. alert($("#test").height());   
  2. alert($("#test").innerHeight());   
  3. alert($("#test").outerHeight());   
  4. alert($("#test").outerHeight(true));  

结果:

在ie中的结果:17px,37px,41px,61px

在ff中的结果:20px,40px,44px,64px

html代码:

  1. <div class="width: 150px;height: 41px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>  

js代码:

  1. alert($("#test").height());   
  2. alert($("#test").innerHeight());   
  3. alert($("#test").outerHeight());   
  4. alert($("#test").outerHeight(true));   
  5.    

结果:

在ie中的结果:17px,37px,41px,61px

在ff中的结果:41px,61px,65px,85px

html代码:

  1. <div class="width: 150px;height: 42px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>  

js代码:

  1. alert($("#test").height());   
  2. alert($("#test").innerHeight());   
  3. alert($("#test").outerHeight());   
  4. alert($("#test").outerHeight(true));  

结果:

在ie中的结果:18px,38px,42px,62px

在ff中的结果:42px,62px,66px,86px

html代码:

  1. <div class="width: 150px;height: 60px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>  

js代码:

  1. alert($("#test").height());   
  2. alert($("#test").innerHeight());   
  3. alert($("#test").outerHeight());   
  4. alert($("#test").outerHeight(true));  

结果:

在ie中的结果:36px,56px,60px,80px

在ff中的结果:60px,80px,84px,104px

标签:

给我留言