jQuery height()、innerHeight()、outerHeight()函数的区别详解
更新时间：2016年05月23日 23:29:10 投稿：mdxy-dxy
这篇文章主要介绍了jQuery height()、innerHeight()、outerHeight()函数的区别详解,需要的朋友可以参考下
在jQuery中，获取元素高度的函数有3个，它们分别是height()、 innerHeight()、 outerHeight()。
与此相对应的是，获取元素宽度的函数也有3个，它们分别是width()、 innerWidth()、 outerWidth()。
在这里，我们以height()、innerHeight()、outerHeight()3个函数为例，来详细介绍它们之间的区别。
下面我们以元素element的盒模型为例来介绍它们之间的区别。
| 函数 | 高度范围 | 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地址。
相关文章
jQuery实现获取form表单内容及绑定数据到form表单操作分析
这篇文章主要介绍了jQuery实现获取form表单内容及绑定数据到form表单操作,结合jQuery封装插件操作分析了jQuery针对form表单的serializeJson数据获取及setForm数据绑定相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了使用jQuery管理选择结果的相关资料,需要的朋友可以参考下2015-01-01
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
最近正在做一个系统，测试组那边不停的报告bug：后台、前台各种列表报告js弹出窗错误，内容仅仅是一句“pareseerror”！2011-01-01
这篇文章主要为大家详细介绍了jquery鼠标悬停导航下划线滑出效果，菜单鼠标悬停出现下划线，向两边扩展的效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章是基于jq技术实现左侧显示图片右侧文字滑动切换效果的相关资料，有需要的小伙伴可以来参考下2015-08-08
这篇文章主要介绍了jQuery实现高度灵活的表单验证功能,涉及jQuery正则判断与页面元素动态操作相关使用技巧,需要的朋友可以参考下2020-04-04
这篇文章主要 介绍了jQuery利用jquery.qrcode.min.js插件实现二维码扫描功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这个效果是在页面头部出现的，出现一下会自动隐藏，上面有x那个提示就要手动关闭一下，其他的都是自动隐藏的！2011-08-08
这篇文章主要介绍了jquery的幻灯片图片切换效果，幻灯片图片切换效果特别适合做产品演示，感兴趣 的小伙伴可以参考下。2015-09-09
这篇文章主要介绍了jquery实现的放大镜效果,结合实例形式分析了jQuery放大镜插件shoplistxq.js的定义与使用相关操作技巧,需要的朋友可以参考下2020-02-02
最新评论