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

参考来源：http://www.jb51.net/article/84897.htm
代码示例（可复制到编辑器直接打开）：
 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>Document</title>
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>height</td><td>1.0+</td><td>1.0+</td></tr>
31                 <tr><td>innerHeight()</td><td>height + padding</td><td>1.2.6+</td><td>1.8.0+</td></tr>
32                 <tr><td>outerHeight()</td><td>height + padding + border</td><td>1.2.6+</td><td>否</td></tr>
33                 <tr><td>outerHeight(true)</td><td>height+padding+border+margin</td><td>1.2.6+</td><td>否</td></tr>
34             </table>
35         </div>
36         <div id="element" style="margin:5px; padding:10px; 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>