jQuery中的height innerHeight outerHeight区别示例介绍
更新时间：2014年06月15日 17:24:36 投稿：whsnow
这篇文章主要介绍了jQuery中的height innerHeight outerHeight的区别,需要的朋友可以参考下
标准浏览器下：
height:高度
innerHeight:高度＋补白
outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距
html代码：
<div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果：
在ie中的结果：17px，37px，41px，61px
在ff中的结果：20px，40px，44px，64px
html代码：
<div class="width: 150px;height: 41px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
[html]
结果：
在ie中的结果：17px，37px，41px，61px
在ff中的结果：41px，61px，65px，85px
html代码：
[code]
<div class="width: 150px;height: 42px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果：
在ie中的结果：18px，38px，42px，62px
在ff中的结果：42px，62px，66px，86px
html代码：
<div class="width: 150px;height: 60px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果：
在ie中的结果：36px，56px，60px，80px
在ff中的结果：60px，80px，84px，104px
结论：在ie中height包含border和padding并且height最小值为17px ，同理可得width，不过它最小值为15px
height:高度
innerHeight:高度＋补白
outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距
html代码：
复制代码 代码如下:
<div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
复制代码 代码如下:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果：
在ie中的结果：17px，37px，41px，61px
在ff中的结果：20px，40px，44px，64px
html代码：
复制代码 代码如下:
<div class="width: 150px;height: 41px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
复制代码 代码如下:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
[html]
结果：
在ie中的结果：17px，37px，41px，61px
在ff中的结果：41px，61px，65px，85px
html代码：
[code]
<div class="width: 150px;height: 42px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
复制代码 代码如下:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果：
在ie中的结果：18px，38px，42px，62px
在ff中的结果：42px，62px，66px，86px
html代码：
复制代码 代码如下:
<div class="width: 150px;height: 60px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj</div>
js代码：
复制代码 代码如下:
alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight(true));
结果：
在ie中的结果：36px，56px，60px，80px
在ff中的结果：60px，80px，84px，104px
结论：在ie中height包含border和padding并且height最小值为17px ，同理可得width，不过它最小值为15px
相关文章
这篇文章主要介绍了jquery插件格式,结合实例形式简单分析了jQuery插件的结构与开发技巧,并附带了一本相关电子书供读者下载参考,需要的朋友可以参考下2016-06-06
jquery判断RadioButtonList和RadioButton中是否有选中项示例
用jquery判断RadioButtonList和RadioButton中是否有选中项，下面有个不错的示例，感兴趣的朋友可以参考下2013-09-09
$(function() {});是$(document).ready(function(){ })的简写，最早接触的时候也说$(document).ready(function(){ })这个函数是用来取代页面中的window.onload;但是今天发现 好像不是这样回事！是在做一个页面载入效果时发现的！2015-08-08
当有大量的内容或者图片需要在你的网站或者BLOG上展示的时候，以幻灯片滑动的方式是一个不错的选择，这种效果常用于公司网站或者个人BLOG。2010-10-10
动态加载js和css的jquery，可用于在生成页面时通过js函数加载一些共通的js和css文件,需要的朋友可以参考下2014-09-09
本篇文章主要介绍了jQuery控制元素隐藏和显示的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
下面小编就为大家带来一篇浅谈jquery中ajax跨域提交的时候会有2次请求的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了Iframe实现跨浏览器自适应高度解决方法,通过父层容器的应用来实现这一功能,非常实用的一个技巧,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了jQuery Validate表单验证入门知识，该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API，感兴趣的小伙伴们可以参考一下2015-12-12
基于jquery的滚动鼠标放大缩小图片效果，需要的朋友可以参考下。2011-10-10
最新评论