jquery width(), innerWidth(), outerWidth() 区别
#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() 区别的更多相关文章
- jQuery中【width(),innerWidth(),outerWidth()】
这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...
- jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别
width()仅仅包括content(内容) innerWidth()包括content(内容)和padding(补白) outerWidth()包括content(内容),padding(补白)和b ...
- jQuery—一些常见方法(3)【width(),innerWidth(),outerWidth()】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读
在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...
- width() innerwidth() outerwidth() css('width')
不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...
- jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...
- [转]jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
转自:http://www.cnblogs.com/keyi/p/5933981.html jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...
- jquery中innerwidth,outerwidth,outerwidth和width的区别
在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...
- innerWidth outerWidth
在jQuery中: 一.width()方法用于获得元素宽度: 二.innerWidth()方法用于获得包括内边界(padding)的元素宽度; 三.outerWidth()方法用于获得包括内边界(pa ...
随机推荐
- 关于php读mysql数据库时出现乱码的解决方法
关于php读mysql数据库时出现乱码的解决方法 php读mysql时,有以下几个地方涉及到了字符集. 1.建立数据库表时指定数据库表的字符集.例如 create table tablename ( ...
- H5移动端的注意细节
1. max-width用在pc端页面,max-device-width用在移动设备上 2. device-pixel-ratio 设备像素比 3.设备自己单位-物理单位dp/dip css像素 px ...
- WinForm窗体之间传值
当程序需要将一个窗体中的一些信息传给另一个窗体并让其使用时,就需要用到这个知识点 方法一:通过接受参数的窗体的构造函数传值 例:现有Form1和Form2两个窗体,二者都包含一个文本框,Form1还包 ...
- iOS9 中的一些适配问题
1.URL scheme白名单:在info文件中加入LSApplicationQueriesSchemes(Array),添加需要的scheme,如微信:weixin.wechat 支付宝:alipa ...
- 关于模板中的动态取值 ---反射与javascript脚本编译
在项目中经常遇到一个问题,打印word或者打印excel的时候,我们经常使用一对一的赋值或者批量替换的方式来对模板进行修改. 但是现在遇到两种场景: 1.取值是通过自定以方法进行取值的. 如:一个销售 ...
- jquery中$.ajax的$.get与$.post使用
<script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ve ...
- gdb调试带参数程序(转:笑笑小白,cnblog http://www.cnblogs.com/rosesmall/archive/2012/04/10/2440514.html)
一般来说GDB主要调试的是C/C++的程序.要调试C/C++的程序,首先在编译时,我们必须要 把调试信息加到可执行文件中.使用编译 器(cc/gcc/g++)的 -g 参数可以做到这一点.如: > ...
- MYSQL一对多,两表查询合并数据
select a.askid,a.title,GROUP_CONCAT(b.message SEPARATOR '----') as content from gg_ask as a join gg_ ...
- ASP.NET程序从IIS6移植到IIS7时出现500.22错误
最可能的原因: • 此应用程序在 system.web/httpModules 节中定义配置. 可尝试的操作: • 将配置迁移到 system.webServer/modules 节 ...
- U盘安装CentOS7
1:U盘启动,进入安装界面,点击Tab键,修改最后一行如下: ...=initrd.img linux dd quiet 查看centos系统盘符,例如:sdb4 2:重启电脑,进入安装界面,点击Ta ...