jQuery 获取元素的高度

在 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对象的高度；

总结
1 height() 高度为 height ,
2 innerHeight() 高度为 height+padding ,
3 outerHeight() 高度为 height+padding+border ,
4 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>