参考来源：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. opencv中的缩放函数

    图像处理里面缩放操作是比较常见的: 最近邻插值:类似简单映射的处理方式,目标图像w1,h1,原始图像w0,h0,则在目标图像上的点(x,y)的像素点实际对应原始图上(x*w0/w1,y*h0/h1)的 ...

  2. 【EasyUI学习-3】Easyui tabs入门实践

    作者:ssslinppp       1. 摘要 一般我们在设计程序主框架的时候,当点击(子)菜单时,希望相应界面都在tabs页中显示: 在显示的时候,如果之前打开过该界面,则希望重新选中对应的tab ...

  3. 通过 CeSi + Supervisor 可视化集中管理服务器节点进程

    通过 CeSi + Supervisor 可视化集中管理服务器节点进程 简介 Supervisor 的安装及基本使用 1. 安装 2. 基本使用  2.1 启动 supervisor 2.2 Supe ...

  4. 术语-服务：IaaS

    ylbtech-术语-服务:IaaS IaaS(Infrastructure as a Service),即基础设施即服务.消费者通过Internet 可以从完善的计算机基础设施获得服务.这类服务称为 ...

  5. 6-3-1appium iOS

    环境准备 brew install carthage npm i -g ios-deploy brew install libimobiledevice --HEAD brew install ide ...

  6. word2vec 的理解

    1.CBOW 模型 CBOW模型包括输入层.投影层.输出层.模型是根据上下文来预测当前词,由输入层到投影层的示意图如下: 这里是对输入层的4个上下文词向量求和得到的当前词向量,实际应用中,上下文窗口大 ...

  7. python读取文件中的字典

    import ast def file_read():    with open('D:\\pytharm\\jichuyufa\\day2\\pro_cty_con.txt', 'r', encod ...

  8. js url转码

    JS中对URL进行转码与解码   1. escape 和 unescape escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值. 采用unicode字符集对指定的 ...

  9. packert tracer配置路由器

    配置路由器snmp: https://wenku.baidu.com/view/e73c343f0b4c2e3f57276329.html

  10. leetcode217

    public class Solution { public bool ContainsDuplicate(int[] nums) { var list = nums.Distinct(); if ( ...