height() 和之前讲过的 width() 是同一对尺寸方法，一个管高度，一个管宽度，参数形式和使用逻辑几乎一样。如果你已经把 width() 搞明白了，学 height() 会很快，反过来如果 height() 先理解透，再回头看 width() 也没什么障碍。
还是先强调那个容易被忽视的细节：height() 只处理内容区域的高度，不包含 padding、border、margin。很多人在做了一个带内边距的容器后，用 height() 取到的高度跟肉眼看到的对不上，原因就在这里。CSS 的 box-sizing 属性会改变盒子模型的计算规则，但 jQuery 的 height() 不受影响，它始终取内容区。这一点在代码调试时经常成为突破口。
语法形式
跟 width() 一样，三种调用方式：
获取高度：
$(selector).height()
返回第一个匹配元素的内容高度，纯数字，不带单位。
设置固定高度：
$(selector).height(value)
给所有匹配元素统一设置高度。传数字默认单位是 px，也可以用字符串指定其他 CSS 单位。
通过函数设置高度：
$(selector).height(function(index, currentheight){
return 新的高度值;
})
index 是元素在里的位置，currentheight 是当前高度值。这个形式在需要根据元素现状做差异化设置时很好用。
代码示例：获取高度
基础示例，点击按钮弹出 div 的内容高度。div 的 CSS 写的是 height:100px，但带了 10px 的 padding 和 1px 的 border，height() 返回的仍然是 100，padding 和 border 没有被计入。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素高度示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div style="height:100px;width:200px;padding:10px;margin:3px;border:1px solid #2980b9;background-color:#d6eaf8;">
学习 jQuery 尺寸方法
</div>
<br>
<button id="getHeightBtn">获取 div 高度</button>
<script>
$(document).ready(function(){
$("#getHeightBtn").click(function(){
alert("当前 div 的内容高度为：" + $("div").height() + "px");
});
});
</script>
</body>
</html>
运行后弹出的数字是 100。如果你需要拿到包含 padding 在内的高度，应该换 innerHeight()。这是我刚接触 jQuery 尺寸方法时踩过的坑，当时拿 height() 的值去算两个元素的相对位置，结果总是差那么一点，后来才发现漏掉了 padding。
代码示例：设置高度
下面这个例子演示点击方块后改变高度。五个橙色方块初始高度都是 100px，点哪个就把哪个设成 50px，同时改变背景色表示已被点击。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置元素高度示例</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.block {
width: 50px;
height: 100px;
float: left;
margin: 5px;
background: #e67e22;
cursor: pointer;
}
</style>
</head>
<body>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<script>
$("div.block").one("click", function(){
$(this).height(50).css({
cursor: "default",
backgroundColor: "#27ae60"
});
});
</script>
</body>
</html>
这里用 one() 而不是 on() 或者 click()，是让每个方块只能触发一次高度变化。实际做交互组件的时候，如果希望操作只生效一次，one() 比手动写标记位要干净。
函数参数的实际应用
函数参数在日常开发里不常用，但特定场景下很有价值。比如有一组柱状图需要根据各自的数据动态设定高度，这时候每个柱子的高度都不同，用回调函数遍历设置就会很自然。
思路是这样的：
var dataValues = [80, 120, 65, 150, 90];
$(".bar").height(function(index){
return dataValues[index];
});
每根柱子根据数组里对应索引的数据来设定高度，比手动写五个 height() 调用要利索得多。而且如果数据来自接口返回的 JSON，直接取对应字段就能完成渲染，代码可维护性也好。
本节课程知识要点
-
height()只返回内容区域高度，padding、border、margin 都不在计算范围内。调试尺寸问题时先确认是不是用对了方法。 -
返回值是纯数字，方便参与加减乘除等数学运算，做动画、布局计算时很好用。
-
设置高度时传数字默认为 px，传字符串可指定其他单位如
"50%"、"10em"，注意字符串格式要写对。 -
函数参数形式适合需要基于索引或当前高度做动态计算的场景，配合
index和currentheight两个参数写逻辑很直接。 -
如果要获取包含 padding 的高度，用
innerHeight()；如果要连 border 一起算，用outerHeight()。别用height()手动去加，代码既啰嗦又容易出错。
height() 方法表面上看就是取值和赋值，但把内容高度、内边距、边框这几个概念跟 jQuery 的几个尺寸方法对应清楚，才算真正掌握了它。实际写代码的时候，根据需求选对方法——只要内容区的高度用 height()，要算上内边距用 innerHeight()，要完整盒子高度用 outerHeight()——做到这一点，布局相关的 JS 代码会少很多意外。
