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

相关文章

  • 编写高效jQuery代码的4个原则和5个技巧

    编写高效jQuery代码的4个原则和5个技巧

    有了JQuery对JS的整合和封装,它让页面操作更加的随心所欲,所以只有遵循良好的规范才会让代码更高效,更健壮。以下是我对如何高效操作JQuery的一些拙见,望指正!
    2014-04-04
  • jQuery源码分析-03构造jQuery对象-工具函数

    jQuery源码分析-03构造jQuery对象-工具函数

    jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下。
    2011-11-11
  • 在网站上应该用的30个jQuery插件整理

    在网站上应该用的30个jQuery插件整理

    jQuery插件是网页设计师最喜欢的。从图像滑块,图像画廊和导航插件,它们是如此众多,如此多样,如此惊人的和互动可以制作美化网站
    2011-11-11
  • jQuery实现订单提交页发送短信功能前端处理方法

    jQuery实现订单提交页发送短信功能前端处理方法

    这篇文章主要介绍了jQuery实现订单提交页发送短信功能前端处理方法,涉及jQuery响应鼠标事件及针对页面元素的样式与字符串正则操作相关技巧,需要的朋友可以参考下
    2016-07-07
  • jquery判断输入密码两次是否相等

    jquery判断输入密码两次是否相等

    这篇文章分别介绍了Jquery框架easyui判断输入密码两次是否相等,以及使用jQuery.validate验证表单中两次密码是否一致的问题,需要的朋友可以参考下
    2015-12-12
  • jQuery打字效果实现方法(附demo源码下载)

    jQuery打字效果实现方法(附demo源码下载)

    这篇文章主要介绍了jQuery打字效果实现方法,详细分析了jQuery实现打字效果所涉及的jticker_split.js插件机具体调用技巧,并附带完整的demo源码供读者下载参考,需要的朋友可以参考下
    2015-12-12
  • 简单实现限制uploadify上传个数

    简单实现限制uploadify上传个数

    本文给大家分享的是在使用uploadify上传文件或者图片的时候,如何做到限制上传个数的方法,十分的简单方便实用,有需要的小伙伴可以参考下。
    2015-11-11
  • 解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法

    解决jquery validate 验证不通过后验证正确的信息仍残留在label上

    在本篇文章里小编给大家整理了关于解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法,有需要的朋友们可以学习下。
    2019-08-08
  • jquery移动端TAB触屏切换实现效果

    jquery移动端TAB触屏切换实现效果

    这篇文章主要介绍了jquery移动端TAB触屏切换实现效果案例,感兴趣的小伙伴们可以参考一下
    2015-10-10
  • jqPlot jquery的页面图表绘制工具

    jqPlot jquery的页面图表绘制工具

    可能是个人认识能力有限,一直认为仅仅靠html是很难展现稍具动态的图表的,但是在看到jqPlot之后,我的认识有了很大改变,jqplpt——基于HTML的图表展示插件,而且不生成图片,最可贵的是能生成类似flex的数据动态提示以及动态改变数据展示范围等等。
    2009-07-07

最新评论