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 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
cypress测试本地web应用
Jun 01 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP编码转换
2012/11/05 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
2016/10/27 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
2018/03/05 Javascript
Vue中props的使用详解
2018/06/15 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
python插入排序算法的实现代码
2013/11/21 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
《匆匆》教学反思
2014/02/22 职场文书
合伙协议书范本
2014/04/21 职场文书
物业管理工作方案
2014/05/10 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
故宫英文导游词
2015/01/31 职场文书
运动会通讯稿100字
2015/07/20 职场文书