#div1 {
width: 100px;
height: 100px;
border: 5px black solid;
padding: 10px;
margin: 10px;
background: orange;
}

#div1-son {
background: white;
width: 100%;
height: 100%;
}

<div id="div1">
  <div id="div1-son"></div>
</div>

width(): 获取第一个匹配元素内部宽度(不包括补白 padding 和边框 border)。

width(): 100

innerWidth() 获取第一个匹配元素边框以内的宽度(包括补白 padding ,不包括 边框border)。

innerWidth(): 120

outerWidth() 获取第一个匹配元素外部宽度(默认包括补白 padding和边框border )。此方法对可见和隐藏元素均有效。

outerWidth(): 130

outerWidth(true) 获取第一个匹配元素外部宽度(默认包括补白 padding和边框border和外边距Margin )。此方法对可见和隐藏元素均有效。

outerWidth(true): 150

height(): 获取第一个匹配元素内部高度(不包括补白 padding 和边框 border)。

heigh(): 100

innerheight() 获取第一个匹配元素边框以内的高度(包括补白 padding ,不包括 边框border)。

innerheight(): 120

outerHeight() 获取第一个匹配元素外部高度(默认包括补白 padding和边框border )。此方法对可见和隐藏元素均有效。

outerWidth(): 130

outerHeight(true) 获取第一个匹配元素外部高度(默认包括补白 padding和边框border和margin )。此方法对可见和隐藏元素均有效。

outerWidth(): 150

jquery width(), innerWidth(), outerWidth() 区别的更多相关文章

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

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

  2. jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别

    width()仅仅包括content(内容) innerWidth()包括content(内容)和padding(补白) outerWidth()包括content(内容),padding(补白)和b ...

  3. jQuery—一些常见方法(3)【width(),innerWidth(),outerWidth()】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读

    在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...

  5. width() innerwidth() outerwidth() css('width')

    不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...

  6. jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别

    jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...

  7. [转]jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别

    转自:http://www.cnblogs.com/keyi/p/5933981.html   jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...

  8. jquery中innerwidth,outerwidth,outerwidth和width的区别

    在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...

  9. innerWidth outerWidth

    在jQuery中: 一.width()方法用于获得元素宽度: 二.innerWidth()方法用于获得包括内边界(padding)的元素宽度; 三.outerWidth()方法用于获得包括内边界(pa ...

随机推荐

  1. 关于php读mysql数据库时出现乱码的解决方法

    关于php读mysql数据库时出现乱码的解决方法 php读mysql时,有以下几个地方涉及到了字符集. 1.建立数据库表时指定数据库表的字符集.例如 create table tablename ( ...

  2. H5移动端的注意细节

    1. max-width用在pc端页面,max-device-width用在移动设备上 2. device-pixel-ratio 设备像素比 3.设备自己单位-物理单位dp/dip css像素 px ...

  3. WinForm窗体之间传值

    当程序需要将一个窗体中的一些信息传给另一个窗体并让其使用时,就需要用到这个知识点 方法一:通过接受参数的窗体的构造函数传值 例:现有Form1和Form2两个窗体,二者都包含一个文本框,Form1还包 ...

  4. iOS9 中的一些适配问题

    1.URL scheme白名单:在info文件中加入LSApplicationQueriesSchemes(Array),添加需要的scheme,如微信:weixin.wechat 支付宝:alipa ...

  5. 关于模板中的动态取值 ---反射与javascript脚本编译

    在项目中经常遇到一个问题,打印word或者打印excel的时候,我们经常使用一对一的赋值或者批量替换的方式来对模板进行修改. 但是现在遇到两种场景: 1.取值是通过自定以方法进行取值的. 如:一个销售 ...

  6. jquery中$.ajax的$.get与$.post使用

    <script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ve ...

  7. gdb调试带参数程序(转:笑笑小白,cnblog http://www.cnblogs.com/rosesmall/archive/2012/04/10/2440514.html)

    一般来说GDB主要调试的是C/C++的程序.要调试C/C++的程序,首先在编译时,我们必须要 把调试信息加到可执行文件中.使用编译 器(cc/gcc/g++)的 -g 参数可以做到这一点.如: > ...

  8. MYSQL一对多,两表查询合并数据

    select a.askid,a.title,GROUP_CONCAT(b.message SEPARATOR '----') as content from gg_ask as a join gg_ ...

  9. ASP.NET程序从IIS6移植到IIS7时出现500.22错误

    最可能的原因:  •    此应用程序在 system.web/httpModules 节中定义配置.  可尝试的操作:  •    将配置迁移到 system.webServer/modules 节 ...

  10. U盘安装CentOS7

    1:U盘启动,进入安装界面,点击Tab键,修改最后一行如下: ...=initrd.img linux dd quiet 查看centos系统盘符,例如:sdb4 2:重启电脑,进入安装界面,点击Ta ...