参考来源：http://www.jb51.net/article/84897.htm
代码示例（可复制到编辑器直接打开）：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
<title>Document</title>
</head> <body>
<div class="container">
<div class="page-header">
<h1>jQuery height()、innerHeight()、outerHeight()函数的区别详解</h1>
</div>
<pre>
在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。
与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。
在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。
下面我们以元素element的盒模型为例来介绍它们之间的区别(详见表格)。
1、 只有height()函数可用于window或document对象。
2、 "支持写操作"表示该函数可以为元素设置高度值。
3、 1.4.1+ height()新增支持参数为函数(之前只支持数值)。
4、 1.8.0+ innerHeight()支持参数为数值或函数。
</pre>
<div class="table-response">
<table class="table table-striped table-bordered table-hover">
<tr class="success"><th>函数</th><th>高度范围</th><th>jQuery版本</th><th>支持写操作</th></tr>
<tr><td>height()</td><td>height</td><td>1.0+</td><td>1.0+</td></tr>
<tr><td>innerHeight()</td><td>height + padding</td><td>1.2.6+</td><td>1.8.0+</td></tr>
<tr><td>outerHeight()</td><td>height + padding + border</td><td>1.2.6+</td><td>否</td></tr>
<tr><td>outerHeight(true)</td><td>height+padding+border+margin</td><td>1.2.6+</td><td>否</td></tr>
</table>
</div>
<div id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div> </div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
var $ele = $("#element"); // height() = height(100) = 100
document.writeln($ele.height()); // 100 // innerHeight() = height(100) + padding(10*2)= 120
document.writeln($ele.innerHeight()); // 120 // outerHeight() = height(100) + padding(10*2) + border(1*2) = 122
document.writeln($ele.outerHeight()); // 122 // outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132
document.writeln($ele.outerHeight(true)); // 132
</script> </body> </html>