参考来源：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——collections模块、time模块、random模块、os模块、sys模块

    1. collections模块 (1)namedtuple # (1)点的坐标 from collections import namedtuple Point = namedtuple('poin ...

  2. C#利用zxing.net操作二维码和条形码

    下载地址:http://zxingnet.codeplex.com/ zxing.net是.net平台下编解条形码和二维码的工具,使用非常方便. 首先下载二进制dll文件,引入工程: 代码: usin ...

  3. 关于分布式锁Java常用技术方案

    前言:       由于在平时的工作中,线上服务器是分布式多台部署的,经常会面临解决分布式场景下数据一致性的问题,那么就要利用分布式锁来解决这些问题.      所以自己结合实际工作中的一些经验和网上 ...

  4. [UE4]角色、动画蓝图、动画蒙太奇、动画之间的调用关系

    一.在“角色”中设置要使用的“动画蓝图” 二.在“动画蓝图”中使用“动画”和“混合动画” 三.在“混合动画”中,也可以使用“动画” 四.在角色中使用“动画蒙太奇”

  5. RBAC相关的配置

    一.什么是RBAC 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注. 在RBAC中,权限与角色相关联,用户通 ...

  6. ajax异步、同步问题，KindEditor ajax提交内容，ajax提交form表单 解决按两次的问题

    版权声明:本文为博主原创文章,未经博主允许不得转载. 如果ajax不采用异步,整个js代码在服务器返回结果前都将阻塞,alert方法除外 lookUp('lookUp','',100,300,3); ...

  7. tornado.gen 模块解析

    转自:http://strawhatfy.github.io/2015/07/22/Tornado.gen/ 引言 注:正文中引用的 Tornado 代码除特别说明外,都默认引用自 Tornado 4 ...

  8. 让MySql支持Emoji表情（MySQL中4字节utf8字符保存方法）

    手机端插入Emoji表情,保存到数据库时报错: Caused by: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x84' ...

  9. 本地管理表空间和字典管理表空间的特点，ASSM有什么特点

    字典管理表空间(Dictionary-Managed Tablespace简称DMT),8i以前包括以后都还可以使用的一种表空间管理模式,通过数据字典管理表空间的空间使用. Oracle使用两个字典来 ...

  10. CYQ.Data 轻量数据层之路 使用篇二曲 MAction 数据查询(十三)----002

    原文链接:https://blog.csdn.net/cyq1162/article/details/53303390 前言说明: 本篇继续上一篇内容,本节介绍所有相关查询的使用. 主要内容提要: 1 ...