width():

　　不包括元素的外边距(margin)、内边距(padding)、边框(border)等部分的宽度。

innerWidth():

　　包括元素的内边距(padding)，但不包括外边距(margin)、边框(border)等部分的宽度。

outerWidth():

　　包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。

 <body>

         <div class="box"></div>

 </body>
 <style>

    .box{ width: 100px;height: 100px;background-color: red; }

 </style>
 <script>

         $(function () {

             //无边距

             console.log("width",$(".box").width());//100px

             console.log("innerWid", $(".box").innerWidth());//100px

             console.log("outerWid",$(".box").outerWidth());//100px

             //加padding 10px;

             $(".box").css("padding", "10px");

             console.log("width", $(".box").width());//100px

             console.log("innerWid", $(".box").innerWidth());//120px

             console.log("outerWid", $(".box").outerWidth());//120px

             //加border 5px

             $(".box").css("border", "5px solid orange");

             console.log("width", $(".box").width());//100px

             console.log("innerWid", $(".box").innerWidth());//120px

             console.log("outerWid", $(".box").outerWidth());//130px

             //加margin 10px

             $(".box").css("margin", "10px");

             console.log("width", $(".box").width());//100px

             console.log("innerWid", $(".box").innerWidth());//120px

             console.log("outerWid", $(".box").outerWidth());//130px

             console.log("outerWid", $(".box").outerWidth(true));//150px

         })

 </script>

jQuery的width()、innerWidth()、outerWidth()方法的更多相关文章

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

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

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

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

  3. jquery width(), innerWidth(), outerWidth() 区别

    #div1 { width: 100px; height: 100px; border: 5px black solid; padding: 10px; margin: 10px; backgroun ...

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

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

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

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

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

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

  7. innerWidth outerWidth

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

  8. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

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

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

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

  10. width() 、 height() 方法；innerWidth() 、innerHeight() 方法；outerWidth() 、 outerHeight() 方法的区别

    1.width() . height() 方法 设置或返回元素的宽度.高度(不包括内边距.边框或外边距): 2.innerWidth() .innerHeight() 方法 返回元素的宽度.高度(包括 ...

随机推荐

  1. shell中的for、while、until（二）

    1.C语言格式的for命令: for((var; condition;iteration process)) 注意: 1.给变量赋值可以有空格 2.条件中的变量不以美元符开头: 3.迭代过程的算式未用 ...

  2. beego——静态文件

    Go 语言内部其实已经提供了 http.ServeFile,通过这个函数可以实现静态文件的服务. beego 针对这个功能进行了一层封装,通过下面的方式进行静态文件注册: beego.SetStati ...

  3. go——常量

    常量是一个简单值的标识符,在程序运行时,不会被修改的量常量中的数据类型只可以是布尔值.数字型(整数型.浮点型和复数)和字符串.常量的定义格式: const identifier [type] = va ...

  4. 第二课 GCC入门之静态库以及共享库

    序言: 前面一课讲了gcc的简单入门,包括gcc编译步骤:预处理:编译:汇编:链接.今天这节课就来讲下linux的库也欢迎大家吐糟共同学习. 原理: linux系统中分为2种库:静态库和共享库.静态库 ...

  5. [笔记]Go语言写文件几种方式性能对比

    Go语言中写文件有多种方式,这里进行如下几种方式的速度对比: 打开文件,写入内容,关闭文件.如此重复多次 打开文件,写入内容,defer 关闭文件.如此重复多次 打开文件,重复多次写入内容,defer ...

  6. QQ空间动态内容，好友信息，点赞爬虫脚本

    一.安装基础的软件包: 1.准备好火狐浏览器,并下载geckodriver,将geckodriver加入到环境变量:下载geckodriver的地址:https://pan.baidu.com/s/1 ...

  7. 【Flask】Flask Cookie操作

    ### 什么是cookie:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了解决这个问题,第 ...

  8. Batch Normalization 详解

    一.背景意义 本篇博文主要讲解2015年深度学习领域,非常值得学习的一篇文献:<Batch Normalization: Accelerating Deep Network Training b ...

  9. Dangling Javadoc comment

    Javadoc主要用于对类和方法的注释.Javadoc没有@file和@date的注解.Javadoc has no @file or @date tags. You should be taggin ...

  10. OCR训练数据生成方法

    有的时候我们训练网络的时候,数据集在收集的过程中由于种种原因导致图像收集的不完整,比如某些种类很少,或者没有,这个时候我们就可以考虑自己生成数据集. 这个和data augmentation还不太一样 ...