• 在 jQuery 中，获取元素高度的方法有 3 个：height()、innerHeight()、outerHeight()。

  • 元素的盒模型： height（高度）、padding（内边距）、margin（外边距）、border（边框）。：

height()：

  1. 用于设置或返回当前匹配元素的高度；
  2. 高度不包括元素的外边距(margin)、内边距(padding)、边框(border)等；
  3. 对不可见的元素依然有效；
  4. 还可获取 window、document 对象的高度：
  5. $(window).height();   // 返回浏览器视口的高度
  6. $(document).height(); // 返回 HTML 文档的高度

innerHeight()：

  1. 用于设置或返回当前匹配元素的内高度；
  2. 内高度包括只元素的内边距(padding)；
  3. 对不可见的元素依然有效；
  4. 不适用于获取 window、document 对象的高度；

outerHeight()：

  1. 获取当前匹配元素的外高度；
  2. 外高度包括元素的内边距(padding)、边框(border)；
  3. outerHeight(true) 参数为 true 时包含外边距部分的高度，默认为 false 不包括；
  4. 对不可见的元素依然有效；
  5. 不适用于获取 window、document 对象的高度；

！！！

  1. height()          高度为 height
  2. innerHeight()     高度为 height+padding
  3. outerHeight()     高度为 height+padding+border
  4. outerHeight(true) 高度为 height+margin+padding+border

举例：

  1. <div style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #666;"></div>
  1. <script type="text/javascript">
  2.     var div=$("div");
  3.     console.log(div.height());          // 输出 100
  4.     console.log(div.innerHeight());     // 输出 100+10+10=120
  5.     console.log(div.outerHeight());     // 输出 100+10+10+1+1=122
  6.     console.log(div.outerHeight(true)); // 输出 100+10+10+1+1+5+5=132
  7. </script>

 转载自：

(846条消息) jQuery 获取元素的高度_卡尔特斯的博客-CSDN博客_jquery获取元素高度

版权声明：本文为Simoon原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Simoon/p/16573063.html