jQuery height()、innerHeight()、outerHeight()函数的区别详解

 1 DOCTYPE html>
 2 html lang="zh">
 3 
 4     head>
 5         meta charset="UTF-8" />
 6         meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7         meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8         link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
 9         title>Documenttitle>
10     head>
11 
12     body>
13         div class="container">
14         div class="page-header">
15             h1>jQuery height()、innerHeight()、outerHeight()函数的区别详解h1>
16         div>
17         pre>
18             在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。
19             与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。
20             在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。
21             下面我们以元素element的盒模型为例来介绍它们之间的区别(详见表格)。
22             1、 只有height()函数可用于window或document对象。
23             2、 "支持写操作"表示该函数可以为元素设置高度值。
24             3、 1.4.1+ height()新增支持参数为函数(之前只支持数值)。
25             4、 1.8.0+ innerHeight()支持参数为数值或函数。
26         pre>
27         div class="table-response">
28             table class="table table-striped table-bordered table-hover">
29                 tr class="success">th>函数th>th>高度范围th>th>jQuery版本th>th>支持写操作th>tr>
30                 tr>td>height()td>td>heighttd>td>1.0+td>td>1.0+td>tr>
31                 tr>td>innerHeight()td>td>height + paddingtd>td>1.2.6+td>td>1.8.0+td>tr>
32                 tr>td>outerHeight()td>td>height + padding + bordertd>td>1.2.6+td>td>否td>tr>
33                 tr>td>outerHeight(true)td>td>height+padding+border+margintd>td>1.2.6+td>td>否td>tr>
34             table>
35         div>
36         div id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;">div>
37         
38 div>
39         script src="http://www.jq22.com/jquery/jquery-1.10.2.js">script>
40         script type="text/javascript">
41             var $ele = $("#element");
42 
43             // height() = height(100) = 100
44             document.writeln($ele.height()); // 100
45 
46             // innerHeight() = height(100) + padding(10*2)= 120 
47             document.writeln($ele.innerHeight()); // 120
48 
49             // outerHeight() = height(100) + padding(10*2) + border(1*2) = 122 
50             document.writeln($ele.outerHeight()); // 122
51 
52             // outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132 
53             document.writeln($ele.outerHeight(true)); // 132
54         script>
55 
56     body>
57 
58 html>