- 在
jQuery中，获取元素高度的方法有3个：height()、innerHeight()、outerHeight()。 - 元素的盒模型：
height（高度）、padding（内边距）、margin（外边距）、border（边框）。 height()：
用于设置或返回当前匹配元素的高度； 高度不包括元素的外边距(margin)、内边距(padding)、边框(border)等； 对不可见的元素依然有效； 还可获取 window、document 对象的高度： $(window).height(); // 返回浏览器视口的高度 $(document).height(); // 返回 HTML 文档的高度
innerHeight()：
用于设置或返回当前匹配元素的内高度； 内高度包括只元素的内边距(padding)； 对不可见的元素依然有效； 不适用于获取 window、document 对象的高度；
outerHeight()：
获取当前匹配元素的外高度； 外高度包括元素的内边距(padding)、边框(border)； outerHeight(true) 参数为 true 时包含外边距部分的高度，默认为 false 不包括； 对不可见的元素依然有效； 不适用于获取 window、document 对象的高度；
- 总结
height() 高度为 height innerHeight() 高度为 height+padding outerHeight() 高度为 height+padding+border outerHeight(true) 高度为 height+margin+padding+border
- 举例
<div style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #666;"></div>
<script type="text/javascript"> var div=$("div"); console.log(div.height()); // 输出 100 console.log(div.innerHeight()); // 输出 100+10+10=120 console.log(div.outerHeight()); // 输出 100+10+10+1+1=122 console.log(div.outerHeight(true)); // 输出 100+10+10+1+1+5+5=132 </script>
