jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。 公式为height()+padding*2

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。 公式为height()+padding*2+边框*2

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。 公式为height()+padding*2+边框*2+margin*2

实际例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript" >

$(function(){

    $("div").html("innerHeight=" + $("div").innerHeight() + "<br />innerWidth=" + $("div").innerWidth());

 $("div").html( $("div").html() + "<br />Height=" + $("div").height() + "<br />Width=" + $("div").width());

    $("div").html( $("div").html() + "<br />outerHeight=" + $("div").outerHeight() + "<br />outerWidth=" + $("div").outerWidth());

$("div").html( $("div").html() + "<br />outerHeight(true)=" + $("div").outerHeight(true) + "<br />outerWidth(true)=" + $("div").outerWidth(true));

})

</script>

<style type="text/css">

div {

    width:300px;

    height:50px;

    margin:50px;

    padding:50px;

    border:solid 50px red;

}

</style>

<title>demo</title>

</head>

<body>

<div style="border:solid 10px red;">box</div>

</body>

</html>

运行效果:

jQuery中关于height,innerWidth与outerWidth的区别的更多相关文章

  1. jQuery中width、innerWidth、outerWidth的区别

    原文:摘自http://www.canaansky.com/blog/107/ 在css的盒子模型中,最内部是content area,然后是padding.border.margin 那么width ...

  2. jQuery中【width(),innerWidth(),outerWidth()】

    这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...

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

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

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

    jQuery中的 height innerHeight outerHeight区别 标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参 ...

  5. jquery中,size()和length()方法有啥区别

    jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...

  6. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

  7. [转载]jQuery中的html，val，text区别

    在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...

  8. jquery中$.get()提交和$.post()提交有区别

    jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...

  9. jQuery中的height()、innerheight()、outerheight()的区别总结

    在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...

随机推荐

  1. akka各模块

    Akka的模块化做得非常好,它为不同的功能提供了不同的Jar包. akka-actor-2.0.jar – 标准Actor, 有类型Actor,等等 akka-remote-2.0.jar – 远程A ...

  2. Eclipse 关于“The type * is not accessible due to restriction on required library”问题的解决办法

    The type * is not accessible due to restriction on required library”的错误, 意思是所需要的类库由于受限制无法访问. 解决办法: 1 ...

  3. sdk 简单说明文档草稿。

    SDK初始化: HighApi为SDK核心类,请客户端持有其唯一单例对API进行调用. HighApi构造器函数 HighApi(Context appContext, final String ap ...

  4. css兼容问题

    Opacity的兼容处理          filter:alpha(opacity=100); /* IE */        opacity: 0.5; /* 支持opacity的浏览器*/

  5. 王爽<汇编语言>实验十

    实验十 3.数值显示(以下程序附带测试程序) ;名称: dtoc ;功能: 将dword型数据转变为表示十进制数的字符串,字符串以0为结尾 ;参数: (ax)=dword型数据低字 ; (dx)=dw ...

  6. MFC编程 | tab control控件的使用

    因为课程需要,会用到MFC编程,所以讲一些经验总结下,以便日后使用查询. // tab control控件的使用 // 建立一个Cluster窗口,通过tab可以切换成C-Means和Fuzzy C- ...

  7. Servlet页面登录的数据库验证程序(一)

    一.基本思想是MVC模式,一个登录页面login.jsp,一个服务器处理程序Servlet.java,一个MySql数据库userinfo. 另外还有相关的数据封装类User和数据库连接类GetDat ...

  8. kaungbin_DP S (POJ 3666) Making the Grade

    Description A straight dirt road connects two fields on FJ's farm, but it changes elevation more tha ...

  9. [THINKING IN JAVA]复用类

    7 复用类 7.1 组合 即在一个类中使用另一个类作为成员变量,这是复用了现有程序代码的功能,而非形式. 7.2 继承 关键字:extends,这种复用是形式的复用,是一种可扩展和限制的复用: 复用: ...

  10. VS调试技巧,提高调试效率（转）：

    如果你还没有使用过这些技巧,希望这篇博文能帮你发现它们. 它们学起来很容易,能帮你节省很多时间. 运行到光标(Ctrl+ F10) 我经常看见人们是这样来调试应用程序的: 他们在应用程序需要调试的代码 ...