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. android 6 (API 23) 及更高版本 面向 NDK 开发者的 Android 变更

    Android N 已经出来,有了好大的变化,对于我们开发者来说,最大的影响莫过于**NDK**相关东西. 以下是在中国谷歌开发者社区看到的.里面有好多的变化,欢迎大家来讨论. 发布人:开发顾问 Dm ...

  2. rtsp over udp

    #include <stdio.h> #include <netinet/in.h> #include <sys/socket.h> #include <st ...

  3. HTML 块级元素与行内元素

    1.块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 2.如果没有css的作用,块元素 ...

  4. Excel常见操作，重复数据,去除数据关联

    Eecel对一个数据进行操作后按住右下角的十字架往下拉就可以对下面的操作进行相同 的操作,所以只需先对一个数据进行操作,再拉下来就可以了 通过公式处理的数据跟其它数据有关联 需要对这些数据进行去除它们 ...

  5. java栈的实现

    可以采用数组与链表两种方法来实现栈. 1.用数组实现栈 import java.util.Arrays; public class MyStack<E>{ private Object[] ...

  6. form表单4种提交方式

    <!DOCTYPE html><html> <head> <title>JavaScript表单提交四种方式</title> <met ...

  7. UVALive 6911 F - Double Swords

    思路:1.把所有有长度的剑看做点.Ai点是肯定要取.然后求另一把剑. 先对右区间排个序,然后每次看这个区间范围内有没有剑,如果没有就添加一把(值为右端点的剑): 如果有并且数量为1且这条龙的Ai等这把 ...

  8. 获取配置文件信息——configparser

    配置文件host.int格式如下: [host]product=xxxxxxxxxxtest=xxxxxxxxxx python 3.x代码如下: import os,configparser def ...

  9. sql 语句 名称解析，是 由内向外的。

    子查询内  找不到的 字段 会 向外 寻找,还是找不到 就报错:找到了就不报错,但是 子查询语句就毫无意义了: 解决办法:  字段前面要跟上表的名称.  一般 字段无效 立刻 报错.

  10. 【hihocoder】三十九周：二分.归并排序之逆序对

    就是用归并排序求数组中得逆序对.假设数组为a:[2 4 5],和b:[1 3],那么在这一次归并的时候逆序对这样求,belement表示当前result数组中b数组对应的元素个数,total表示逆序对 ...