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));
结果:
在ie中的结果:17px,37px,41px,61px
在ff中的结果:41px,61px,65px,85px html代码:
<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

原文:http://jquery01.diandian.com/post/2012-01-17/15012978

Jquery中的 height(), innerHeight() outerHeight()区别的更多相关文章

  1. Jquery中的height(),innerHeight(),outerHeight()的区别

    前言 最近练习做弹窗,遇到height(),innerHeight(),outerHeight()的区别. 根据下面的盒模型来了解三者的区别. height():element的height; inn ...

  2. jQuery中的.height()、.innerHeight()和.outerHeight()

    jQuery中的.height()..innerHeight()和.outerHeight()和W3C的盒模型相关的几个获取元素尺寸的方法.对应的宽度获取方法分别为.width()..innerWid ...

  3. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  4. jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )

    jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop   在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...

  5. JQuery中的html(),text(),val()区别

    jQuery中.html()用为读取和修改元素的HTML标签,.text()用来读取或修改元素的纯文本内容,.val()用来读取或修改表单元素的value值. 1.HTML html():取得第一个匹 ...

  6. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  7. jquery中attr和prop的区别(转)

    在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...

  8. 基于jquery中children()与find()的区别介绍

    本篇文章介绍了,基于jquery中children()与find()的区别,需要的朋友参考下 .children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选 ...

  9. jquery中this与$this的区别

    来源:http://www.jb51.net/article/19738.htm jQuery中this与$(this)的区别 $("#textbox").hover( funct ...

随机推荐

  1. 办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时)

    办公软件Office PPT 2010视频教程从入门到精通系列教程(22课时) 乔布斯的成功离不开美轮美奂的幻灯片效果,一个成功的商务人士.部门经理也少不了各种各样的PPT幻灯片.绿色资源网给你提供了 ...

  2. WebSocket使用教程 2

    WebSocket使用教程 - 带完整实例 收藏 james_laughing 发表于 2年前 阅读 46438 收藏 23 点赞 5 评论 4 摘要: WebSocket使用教程 - 带完整实例 什 ...

  3. 接收content-type:multipart/form-data类型的参数

    一.问题描述 最近在写接口程序,该接口需要与其他公司的程序对接.对方发送content-type:multipart/form-data类型的参数,结果通过request.getParameter(p ...

  4. c#字符串转换为日期,支持任意字符串

    文章关键字: c#字符串转换为日期 c#日期转换字符串   字符串转换日期   字符串转换为date   整数转换为字符串   浮点数转换为字符串 字符串转换为时间   将字符串转换为时间   字符转 ...

  5. Maven(二)核心知识点

    Maven有一些核心的知识点需要了解,比如坐标.仓库.插件.生命周期等概念,这里将依次解释. 坐标 Maven以构件来组成基本的控制单元,而定义这个构件的标示,Maven给定义为“坐标”.坐标是Mav ...

  6. JavaScript实现Ajax小结

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...

  7. Java实现文件的加密与解密

    最近在做一个项目,需要将资源文件(包括图片.动画等类型)进行简单的加密后再上传至云上的服务器,而在应用程序中对该资源使用前先将读取到的文件数据进行解密以得到真正的文件信息.此策略的原因与好处是将准备好 ...

  8. Git.Framework 框架随手记-- 分享一个"比较垃圾"的项目

    本文主要分享一个Git.Framework 开发的一个项目的部分源码,此项目代码"比较垃圾",所以请各位码农,码畜,码神,码圣勿喷!发此文只为记录工作问题以及分享问题! 一. 项目 ...

  9. jquery设置滚动条距离页面顶部的高度

    //获取滚动条到顶部的垂直高度 $(document).scrollTop(); //获取滚动条到左边的垂直宽度 $(document).scrollLeft(); function clickFn( ...

  10. python 参数

    摘自:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00137473844933 ...