#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. JNI测试-java调用c算法并返回java调用处-1到20阶乘的和

    一,java端: 定义native方法, 'public native long factorial(int n);', 该方法用c/c++实现,计算'1到20阶乘的和',参数中'int n'是前n项 ...

  2. Python sys.path.append

    python sys.path.append 对于模块和自己写的程序不在同一个目录下,可以把模块的路径通过sys.path.append(路径)添加到程序中. 在程序开头加上: import syss ...

  3. 四大跨平台的APP分析

    转载:http://blog.csdn.net/kenkao/article/details/50678269

  4. iOS 使用xmpp做聊天客户端

    可以号称史上最详细的xmpp做iOS客户端聊天介绍. 简介:XMPP协议是一种基于Socket长连接.以XML格式进行基本信息交换.C/S  S/S多种架构的聊天协议 XMPPServer 基于XMP ...

  5. Swift - 02 - 常量和变量

    //: Playground - noun: a place where people can play import UIKit var str = "Hello, playground& ...

  6. WPF 依赖属性与依赖对象

    在介绍依赖属性之前,我先介绍下属性的历史 属性的历史:      早期C++的类中,只有字段及方法,暴露数据靠的是方法, 但是字段直接暴露会不安全,所以才用方法来暴露,在设置的时候加些约束,在MFC中 ...

  7. SqlDependency 的使用

    1.SqlDependency是什么: SqlDependency 对象表示应用程序和 SQL Server 实例间的查询通知依赖关系.应用程序可以创建一个 SqlDependency 对象并进行注册 ...

  8. javascript基础学习(十五)

    javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的sec ...

  9. jquery mobile listview列表属性(搜索自动填充检索效果)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  10. angularJS学习笔记一

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让 ...