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. 人性化的Form(django)

    django中的Form一般有两种功能: 输入html 验证用户输入 html: <!DOCTYPE html> <html lang="en"> < ...

  2. 微信小程序将带来web程序员的春天！

    微信之父张小龙在年初那次演讲中曾表示:“我自己是很多年的程序员,我觉得我们应该为开发的团体做一些事情.”几个月后,微信正式推出微信应用号(即微信小程序)在互联网中掀起又一波热潮. 过去,对于很多开发者 ...

  3. jmeter 分布式集群

    Jmeter压测过程中,由于测试机配置有限,CPU.内存都可能是存在瓶颈.如果使用很大的并发进行测试时,就可能会感到程序比较卡,这时候就无法继续增加压力了. 解决方法: 搭建Jmeter分布式集群,远 ...

  4. with as （cte common table expression） 公共表表达式

    SQL中 with as 的用法——使用公用表表达式(CTE)  公用表表达式 (CTE) 可以认为是在单个 SELECT.INSERT.UPDATE.DELETE 或 CREATE VIEW 语句的 ...

  5. 【Head First Servlets and JSP】笔记20：EL以及<jsp:useBean ....>的补充

    1.EL的英文是Expression Language,译成中文就是“表达式语言”.这是一种给前端程序员使用的脚本语言,EL与Java表达式相比并没有什么“天壤之别”,在后端程序员看来多少有点“多此一 ...

  6. 【c++习题】【17/4/13】stack

    1.stack 模板.动态内存分配.析构 #include "stack2.cpp" #include <iostream> using namespace std; ...

  7. c++的格式控制

    1: 每个iostream对象维持一个控制IO格式化细节的格式状态.标准库定义了一组操纵符来修改对象的格式状态.所谓操纵符是可用作输入或输出操作符的函数或对象.iostream和iomanip头文件中 ...

  8. 较常用的Math方法及ES6中的扩展

    记录下与Math有关的常用方法,如:求最大值.最小值等,或者是保留几位数啥的 1.数据 let floatA = 2.325232; let floatB = 2.3456; let temporar ...

  9. 《网络对抗》 逆向及Bof进阶实践

    <网络对抗> 逆向及Bof进阶实践 实践目标 注入一个自己制作的shellcode并运行这段shellcode: 实践步骤 准备工作 root@5224:~# apt-get instal ...

  10. 黑苹果Yosemite 10.10.1 修改wowpc.iso文件免选择直接启动Mac系统

    安装教程见: http://www.cnblogs.com/zouzf/p/4356641.html 网上很多教程都是OK的,但每个人的具体情况不同就可能有一些细节问题搞死你1.本文所指的 wowpc ...