jQuery height()、innerHeight()、outerHeight()函数的区别详解
2024-10-16 18:41:52
参考来源：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>
最新文章
- 使用https的HSTS需要注意的一个问题
- redis java对象操作
- golang学习之旅：官方文档汇总
- 用PowerDesigner将SQL语句生成实体类
- hdu 1874（Dijkstra + Floyd）
- python写的自动签到脚本。
- 在CentOS上安装FFMPEG和Gstream-ffmpeg
- 【stm32】ADC的规则通道和注入通道混合使用
- 一步一步学python(六) - 抽象
- Windows服务程序的原理及实现（服务分为WIN32服务和系统服务）
- Velocity缓存与穿透(转)
- C#中简单的写日志的方法
- webstorm常用快捷键及(idea,phpstorm,android studio通用)使用技巧
- Angular2开发拙见——组件规划篇
- 支持Touch ID！EOS 项目进展速报
- 01_学习java WEB涉及到的相关技术
- 「NOI2013」树的计数 解题报告
- 【Scala篇】--Scala中Trait、模式匹配、样例类、Actor模型
- Java全栈程序员之01：做个Linux下的程序猿
- 设置nginx和php-fpm更改上传文件大小限制