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. Git学习笔记-精简版

    注意本文参考廖雪博客: http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 一:Git ...

  2. go——变量

    在数学概念中,变量(variable)表示没有固定值且可以改变的数.但从计算机系统实现角度来看,变量是一段或多段用来存储数据的内存.作为静态类型语言,Go语言总是有固定的数据类型,类型决定了变量内存的 ...

  3. Cannot format given Object as a Date

    这个小错挺有意思的,记录一下 导出Excel的时候,同事直接用 format …… 前提:数据库中该字段是 Timestamp ---- 2016-06-20 22:49:02.967 写个测试说明一 ...

  4. python项目 配置文件 的设置

    一项目目录: 二:默认配置settings的配置:config 文件 __inint__.py文件: #!/usr/bin/env python # -*- coding: utf-8 -*- # C ...

  5. Windows Server 2008 R2 FTP无法从外部访问的解决方法

    在Windows Server 2008 R2中配置好FTP服务器后,可以在本机访问,但是无法从另一台电脑访问.原因就是在于防火墙没有配置好. 1.首先检查服务器管理器中的入站规则,确保已启用FTP服 ...

  6. Javascript何时执行

    分以下两种情况: 1.HTML head部分的Javascript会在被调用的时候执行 需要调用才执行的脚本或事件触发执行的脚本放在head部分,这可以保证脚本在任何调用之前被预先加载,在页面加载完之 ...

  7. MySQL数据库表分区功能详解

    1.什么是表分区? mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可以通过my.cnf中的datadir来查看),一张表主要对应着三个文件,一个是frm存放表 ...

  8. JavaEE初始化时静态代码块加载问题

    1.使用java.exe命令运行某个类的时java.exe Person2.创建一个类的对象时Person p=new Person();3.访问类中的静态成员变量(赋值/获取值)System.out ...

  9. 解析WEB开发编码问题

    解析WEB开发编码问题 URL: http://tcking.javaeye.com/blog/726643 在进行web开发的时候经常会遇到乱码的问题,乱码一般出现在: 1.写在jsp文件中的中文变 ...

  10. idea绿色版+谷歌浏览器绿色版——设置打开jsp文件

    首先我们的工具有 1.idea绿色版 2.Chrome绿色版 3.JavaJDK 4.Tomcat绿色版 文件放在那里都可以 1.idea设置默认打开Chrome 2.idea设置选择Tomcat和J ...