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 相关文章推荐
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
Vue实现按钮级权限方案
Nov 21 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
js实现select下拉框选择
Jan 11 Javascript
Vue实现背景更换颜色操作
Jul 17 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
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
Vant picker 多级联动操作
2020/11/02 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
python中随机函数random用法实例
2015/04/30 Python
python一键升级所有pip package的方法
2017/01/16 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
2015/03/27 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
车间副主任岗位职责
2013/12/24 职场文书
晚宴邀请函范文
2014/01/15 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
护士岗位职责
2014/02/16 职场文书
目标管理责任书
2014/04/15 职场文书
公司收款委托书范本
2014/09/20 职场文书
休假证明书
2015/06/24 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书