参考来源：http://www.jb51.net/article/84897.htm

代码示例（可复制到编辑器直接打开）：

 <!DOCTYPE html>

 <html lang="zh">

     <head>

         <meta charset="UTF-8" />

         <meta name="viewport" content="width=device-width, initial-scale=1.0" />

         <meta http-equiv="X-UA-Compatible" content="ie=edge" />

         <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">

         <title>Document</title>

     </head>

     <body>

         <div class="container">

         <div class="page-header">

             <h1>jQuery height()、innerHeight()、outerHeight()函数的区别详解</h1>

         </div>

         <pre>

             在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。

             与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。

             在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。

             下面我们以元素element的盒模型为例来介绍它们之间的区别(详见表格)。

             1、 只有height()函数可用于window或document对象。

             2、 "支持写操作"表示该函数可以为元素设置高度值。

             3、 1.4.1+ height()新增支持参数为函数(之前只支持数值)。

             4、 1.8.0+ innerHeight()支持参数为数值或函数。

         </pre>

         <div class="table-response">

             <table class="table table-striped table-bordered table-hover">

                 <tr class="success"><th>函数</th><th>高度范围</th><th>jQuery版本</th><th>支持写操作</th></tr>

                 <tr><td>height()</td><td>height</td><td>1.0+</td><td>1.0+</td></tr>

                 <tr><td>innerHeight()</td><td>height + padding</td><td>1.2.6+</td><td>1.8.0+</td></tr>

                 <tr><td>outerHeight()</td><td>height + padding + border</td><td>1.2.6+</td><td>否</td></tr>

                 <tr><td>outerHeight(true)</td><td>height+padding+border+margin</td><td>1.2.6+</td><td>否</td></tr>

             </table>

         </div>

         <div id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div>

 </div>

         <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

         <script type="text/javascript">

             var $ele = $("#element");

             // height() = height(100) = 100

             document.writeln($ele.height()); // 100

             // innerHeight() = height(100) + padding(10*2)= 120

             document.writeln($ele.innerHeight()); // 120

             // outerHeight() = height(100) + padding(10*2) + border(1*2) = 122

             document.writeln($ele.outerHeight()); // 122

             // outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132

             document.writeln($ele.outerHeight(true)); // 132

         </script>

     </body>

 </html>

jQuery height()、innerHeight()、outerHeight()函数的区别详解的更多相关文章

  1. height()、innerHeight()、outerHeight()函数的区别详解

    具体参考博客:http://www.365mini.com/page/jquery-height-vs-innerheight-vs-outerheight.htm

  2. javascript 用函数语句和表达式定义函数的区别详解

    通常我们会看到以下两种定义函数的方式: // 函数语句 function fn(str) { console.log(str); }; // 表达式定义 var fnx=function(str) { ...

  3. jQuery中mouseleave和mouseout的区别详解

    很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p> ...

  4. Jquery中attr与prop的区别详解

    prop()函数的结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性,返回值是空字符串. attr()函数的结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性, ...

  5. Jquery中的 height(), innerHeight() outerHeight()区别

    jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...

  6. Jquery中的height(),innerHeight(),outerHeight()的区别

    前言 最近练习做弹窗,遇到height(),innerHeight(),outerHeight()的区别. 根据下面的盒模型来了解三者的区别. height():element的height; inn ...

  7. JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  8. SurfaceView 与view区别详解

    SurfaceView 与view区别详解 https://blog.csdn.net/u011339364/article/details/83347109 2018年10月24日 17:20:08 ...

  9. (八)open函数的flag详解

    3.1.4.open函数的flag详解13.1.4.1.读写权限:O_RDONLY O_WRONLY O_RDWR(1)linux中文件有读写权限,我们在open打开文件时也可以附带一定的权限说明(譬 ...

随机推荐

  1. 【appium】根据UIAutomator定位元素

    text属性的方法 driver.find_element_by_android_uiautomator('new UiSelector().text("Custom View") ...

  2. fckeditor 配置

    因为下载下来的压缩包里面有包含很多在我们使用时,用不到的,不删除也行.看个人喜好下面以PHP为例,进行程序瘦身 删除所有”_”开头的文件和文件夹   删除FCKeditor的目录下:   fckedi ...

  3. Date类为什么设计为可变的，而不是像String一样？

    首先,不得不承认,这确实是类库设计的一个错误,所以"为什么"进行了这个错误设计并没有意义.但没有事物一诞生就是完美的,我们的Java只是反应的慢了一点,再慢了一点. 更何况,Dat ...

  4. bzoj2763 飞行路线

    Description Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并 ...

  5. SpringMVC的注解方式配置

    SpringMVC支持使用注解方式配置,比配置文件方式更加灵活易用,是SpringMVC使用的主流模式. 1.在配置文件中开启SpringMVC的注解 <!-- 开启包扫描 --> < ...

  6. tomcat 启动超级慢

    今天在新环境里部署tomcat, 刚开始启动很快,关闭之后再启动,却发现启动日志打印到 00:25:14.144 [localhost-startStop-1] INFO  o.s.web.conte ...

  7. [UE4]ue4 FString 中文乱码问题

    使用FString出现乱码,最简单的情况,FString Str = "你好"; 这时候就会出现乱码,解决方法是改成这样 FString Str = TEXT("你好&q ...

  8. CYQ.Data 批量添加数据性能测试（每秒千、万）---003

    原文地址:https://www.cnblogs.com/cyq1162/p/3216267.html 今天有网友火晋地同学进了CYQ.Data官方群了,他正在折腾了一个各大ORM性能测试的比较的软件 ...

  9. 9.求背景图片左边到#box盒子左边外框侧的距离

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. leetcode237

    /** * Definition for singly-linked list. * public class ListNode { * public int val; * public ListNo ...