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. HDOJ 2203 亲和串 【KMP】

    HDOJ 2203 亲和串 [KMP] Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...

  2. LightOJ - 1336 Sigma Function(约数和+整数拆分)

    题干中给出函数公式: 其中pi为n的每个素因数,ei为其个数.设该函数为F(x),其意义为x的约数之和.问在1-n中有多少x,令F(x)为偶数. 分析:设f(p)为(p^(e+1)-1)/(p-1). ...

  3. Hive2.2.1概述（待重写）

    概述 hive 是一个包裹着 hdfs 的壳子,hive 通过 hql,将 sql 翻译成 MR ,进行数据查询. Hive是⼀个构建在Hadoop之上的数据仓库 hive的数据存在hdfs上,元信息 ...

  4. 参考MongoRepository，为接口生成bean实现注入

    首先弄个注解,给代码个入口,这个就是mongo的@EnableMongoRepositories了. @Target(ElementType.TYPE) @Retention(RetentionPol ...

  5. Ubuntu 16.04 安装Django

    > pip install django==1.10.3......或者:> pip3 install django==1.10.3(我采用)......或者:>python3 -m ...

  6. viewport大白话

    以下所有内容均是我自己理解的,可能有误,懂得大佬希望指点一下我.. 首先,写一个简单的页面.里面只有1个200*200的div <html lang="en"> < ...

  7. UIScrollView监听静止的数种情况

    1.直接通过block -(void)testInBlock { //通过block监听 [UIView animateWithDuration:1.0 animations:^{ self.scro ...

  8. QMesageBox的使用

    一.使用构造函数弹出对话框 1. QMessageBox msgBox://最简单的对话框,里面什么也没有 QString str = “test”: msgBox.setText(str); msg ...

  9. 关于PropertyGrid控件的排序问题

    前些天,由于在项目中需要用到PropertyGrid这个控件,展现其所在控件的某些属性,由于有些控件的属性较多,不易浏览,而且PropertyGrid的排序默认的按照字母的顺序排列的,这样导致在在某些 ...

  10. tomcat常用配置详解和优化方法

    tomcat常用配置详解和优化方法 参考: http://blog.csdn.net/zj52hm/article/details/51980194 http://blog.csdn.net/wuli ...