参考来源：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. 【python】网络编程-TCP协议套接字

    服务器端: #!/usr/bin/env python from socket import * from time import ctime HOST = '' PORT = 21567 BUFSI ...

  2. 远程连接linux服务器mysql

    今天遇到一个问题  无法远程链接mysql Host 'XXX' is not allowed to connect to this MySQL server 解决方案/如何开启MySQ先解决第一个提 ...

  3. Qt中路径问题小结

    转载:奋斗Andy 在做Qt项目的时候,我们难免遇到到文件路径问题. 如QFile file("text.txt")加载不成功.QPixmap("../text.png& ...

  4. spring SOA architecture

    在谈这个之前,还得再说下SOA和平台.SOA做两件事情,一个是解耦并识别可重用的服务,一个是对服务进行灵活组装和编排满足业务需求,SOA核心是业务和技术的解耦,服务和能力的复用.而在IT领域的平台平台 ...

  5. java实验三——求平均数，数组排序（有关java保留小数位数，由于编译器版本未到1.5导致的报错format函数第二个参数不对，要求是Object[]）

    package hello; import java.util.Arrays; public class 实验三更正版 { public static void main(String[] args) ...

  6. 亚马逊云EC2做PPTP SERVER的笔记

    1.在亚马逊控制台上启动实例 2. 3. 4. 5. 6.配置安全组,把你的IP开放所有流量. 7. 用你自己的亚马逊KEY或者生成一个新的KEY来登录EC2 8.开始搭建VPN-PPTP——how ...

  7. 本地环境 XAMPP+phpStorm+XDebug+chrome配置和断点调试 注册方法

    我的安装环境:XAMPP版本号V3.1.0 ;phpStorm版本8.0.3;windowsxp 32bit.您老人家先过目一下,不然怕影响意义. XAMPP.phpStorm 都直接安装在了D盘根目 ...

  8. keras的Embedding层

    keras.layers.embeddings.Embedding(input_dim, output_dim, embeddings_initializer='uniform', embedding ...

  9. 【Python编程：从入门到实践】chapter4 操作列表

    chapter4 操作列表 4.1 遍历整个列表 magicians=['alice','david','carolina'] for magician in magicians: print(mag ...

  10. PHP mysqli_autocommit() 函数

    定义和用法 mysqli_autocommit() 函数开启或关闭自动提交数据库修改. 提示:请查看 mysqli_commit() 函数,用于提交指定数据库连接的当前事务.请查看 mysqli_ro ...