jQuery height()innerHeight()outerHeight()函数的区别详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery height()innerHeight()outerHeight()函数的区别详解相关的知识，希望对你有一定的参考价值。
参考来源：http://www.jb51.net/article/84897.htm
代码示例：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 8 <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css"> 9 <title>Document</title> 10 </head> 11 12 <body> 13 <div class="container"> 14 <div class="page-header"> 15 <h1>jQuery height()、innerHeight()、outerHeight()函数的区别详解</h1> 16 </div> 17 <pre> 18 在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。 19 与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。 20 在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。 21 下面我们以元素element的盒模型为例来介绍它们之间的区别(详见表格)。 22 1、 只有height()函数可用于window或document对象。 23 2、 "支持写操作"表示该函数可以为元素设置高度值。 24 3、 1.4.1+ height()新增支持参数为函数(之前只支持数值)。 25 4、 1.8.0+ innerHeight()支持参数为数值或函数。 26 </pre> 27 <div class="table-response"> 28 <table class="table table-striped table-bordered table-hover"> 29 <tr class="success"><th>函数</th><th>高度范围</th><th>jQuery版本</th><th>支持写操作</th></tr> 30 <tr><td>height()</td><td>height</td><td>1.0+</td><td>1.0+</td></tr> 31 <tr><td>innerHeight()</td><td>height + padding</td><td>1.2.6+</td><td>1.8.0+</td></tr> 32 <tr><td>outerHeight()</td><td>height + padding + border</td><td>1.2.6+</td><td>否</td></tr> 33 <tr><td>outerHeight(true)</td><td>height+padding+border+margin</td><td>1.2.6+</td><td>否</td></tr> 34 </table> 35 </div> 36 <div id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div> 37 38 </div> 39 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> 40 <script type="text/javascript"> 41 var $ele = $("#element"); 42 43 // height() = height(100) = 100 44 document.writeln($ele.height()); // 100 45 46 // innerHeight() = height(100) + padding(10*2)= 120 47 document.writeln($ele.innerHeight()); // 120 48 49 // outerHeight() = height(100) + padding(10*2) + border(1*2) = 122 50 document.writeln($ele.outerHeight()); // 122 51 52 // outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132 53 document.writeln($ele.outerHeight(true)); // 132 54 </script> 55 56 </body> 57 58 </html>
以上是关于jQuery height()innerHeight()outerHeight()函数的区别详解的主要内容，如果未能解决你的问题，请参考以下文章
jquery $(window).height() 正在返回文档高度
jquery的height()和javascript的height总结，js获取屏幕高度
动画内容 div 'height' 到 'Auto' onclick - jQuery
jQuery的height()和JavaScript的height总结，js获取屏幕高度