参考来源：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. oracle schema 白话文详解

    概述: (一)什么Oracle叫用户(user): A user is a name defined in the database that can connect to and access ob ...

  2. [转]Nginx负载均衡原理初解

    什么是负载均衡 我们知道单台服务器的性能是有上限的,当流量很大时,就需要使用多台服务器来共同提供服务,这就是所谓的集群. 负载均衡服务器,就是用来把经过它的流量,按照某种方法,分配到集群中的各台服务器 ...

  3. Openfiler使用说明

    Openfiler使用说明 http://www.cnblogs.com/zb9222/p/6118074.html 一. Openfiler简介 Openfiler 能把标准x86/64架构的系统变 ...

  4. linux 信号与多线程

    在Linux的多线程中使用信号机制,与在进程中使用信号机制有着根本的区别,可以说是完全不同.在进程环境中,对信号的处理是,先注册信号处理函数,当信号异步发生时,调用处理函数来处理信号.它完全是异步的( ...

  5. sql 防注入 维基百科

    http://zh.wikipedia.org/wiki/SQL%E8%B3%87%E6%96%99%E9%9A%B1%E7%A2%BC%E6%94%BB%E6%93%8A SQL攻击(SQL inj ...

  6. java工具类-FreeMarker

    package com.huawei.it.citools.utils; import java.io.File;import java.io.IOException;import java.io.S ...

  7. springMVC学习(3)-springMVC和mybatis整合

    一.需求:使用springmvc和mybatis完成商品列表查询. 二.整合思路:springMVC+mybaits的系统架构: 1步):整合dao层 mybatis和spring整合,通过sprin ...

  8. h3c端口汇聚的几种情况-S5500-S5048

    S5500和S5048E聚合的几种情况,分享下:1.S5048E用手工的话,S5500用静态方式2.S5048E用静态的话,S5500用动态方式3.S5048E和S5048E聚合的话,用相同方式即可. ...

  9. [UE4]引擎自身提供的无锁队列等无锁容器（TLockFreePointerList）

    常用的接口: TLockFreePointerListFIFO<T>:先进先出: TLockFreePointerListLIFO<T>:后进先出: TLockFreePoin ...

  10. JS获取url传参

    function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new O ...