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

• 总结

  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>