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


Posted in Javascript onMay 23, 2016

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

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

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

下面我们以元素element的盒模型为例来介绍它们之间的区别。

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

函数 高度范围 jQuery版本 支持写操作
height() height 1.0+ 1.0+
innerHeight() height + padding 1.2.6+ 1.8.0+
outerHeight() height + padding + border 1.2.6+
outerHeight(true) height+padding+border+margin 1.2.6+

1、 只有height()函数可用于window或document对象。
2、 "支持写操作"表示该函数可以为元素设置高度值。
3、 1.4.1+ height()新增支持参数为函数(之前只支持数值)。
4、 1.8.0+ innerHeight()支持参数为数值或函数。

现在,我们参考以下HTML + jQuery示例代码:

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

测试的时候记得机上jquery地址。

Javascript 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 #Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 #Javascript
谈一谈bootstrap响应式布局
May 23 #Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 #Javascript
JavaScript的Vue.js库入门学习教程
May 23 #Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 #Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 #Javascript
You might like
晶体管来复再生式二管收音机
2021/03/02 无线电
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python函数定义和调用过程详解
2020/02/09 Python
用python实现名片管理系统
2020/06/18 Python
关于.NET, HTML的五个问题
2012/08/29 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
机电工程学生自荐信范文
2013/12/07 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
先进工作者事迹材料
2014/12/23 职场文书
财政局长个人总结
2015/03/04 职场文书
公司市场部岗位职责
2015/04/15 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL