width()仅仅包括content(内容)

innerWidth()包括content(内容)和padding(补白)

outerWidth()包括content(内容),padding(补白)和border(边框)

outerWidth(true)包括content(内容),padding(补白),border(边框)和margin(边距)

下面是证实代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="utf-8"/>
  5.     <title></title>
  6.     <script src="../js/jquery-1.10.2.js"></script>
  7.     <script>
  8. $(function(){
  9.     alert($("div").width());
  10.     alert($("div").innerWidth());
  11.     alert($("div").outerWidth());
  12.     alert($("div").outerWidth(true));
  13. })
  14.     </script>
  15.     <style>
  16.         div{width:100px;height:100px;padding:10px;margin: 20px;border:1px solid #ff0000;}
  17.     </style>
  18. </head>
  19. <body>
  20.     <div></div>
  21. </body>
  22. </html>

jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别的更多相关文章

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

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

  2. jQuery中关于height,innerWidth与outerWidth的区别

    jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边 ...

  3. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  4. [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别

    原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul>   <li title='苹果'>苹果</li>   ...

  5. jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下.   DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...

  6. bat mvn Maven中-DskipTests和-Dmaven.test.skip=true的区别 Maven 生命周期

    cd C:\Users\lt32806\git\tempest call mvn clean compile -Dmaven.test.skip=truepause Maven中-DskipTests ...

  7. jQuery中的height()、innerheight()、outerheight()的区别总结

    在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...

  8. jQuery中attr()、prop()、data()用法及区别

    .attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...

  9. jquery中的$("#id")与document.getElementById("id")的区别

    以前一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天做特效的时候才发现并不是这 ...

随机推荐

  1. 从零开始学 Java - Spring MVC 实现跨域资源 CORS 请求

    论职业的重要性 问:为什么所有家长都希望自己的孩子成为公务员? 答:体面.有权.有钱又悠闲. 问:为什么所有家长都希望自己的孩子成为律师或医生? 答:体面.有钱.有技能. 问:为什么所有家长都不怎么知 ...

  2. ABP 初探 之基于EasyUI的CURD

    结束了天天加班的项目,项目虽然结束,但还是有点小问题,只能在后期优化当中完成了,本次做项目采用了,MVC.Webapi.Entityframework,在园了里看到了有关ABP的介绍,同样ABP也是最 ...

  3. 【blade04】用面向对象的方法写javascript坦克大战

    前言 javascript与程序的语言比如C#或者java不一样,他并没有“类”的概念,虽然最新的ECMAScript提出了Class的概念,我们却没有怎么用 就单以C#与Java来说,要到真正理解面 ...

  4. 字体属性设置（一）：谷歌浏览器12px以下字体的显示；方法和原理

    前言: chrome 谷歌浏览器默认的字体大小为16px:可以通过设置font-size来设置字体大小但是当设置到12px以下的时候字体大小不再改变:对于想设置其他大小的字体就很头疼,本文参考网上的方 ...

  5. Android开发5：应用程序窗口小部件App Widgets的实现

    前言 本次主要是实现一个Android应用,实现静态广播.动态广播两种改变 widget内容的方法,即在上篇博文中实验的基础上进行修改,所以此次实验的重点是AppWidget小部件的实现啦~ 首先,我 ...

  6. iOS屏幕尺寸和分辨率了解

    1.截至目前为止,主流的iOS设备屏幕有以下几种: ---------------  iPhone  ---------- --------  iPad ------------ 2.iOS设备屏幕分 ...

  7. JS判断用户手机是IOS还是Android

    $(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf(' ...

  8. Android 手机卫士--设置密码对话框

    本文实现初次设置密码验证过程,首先实现如下效果 本文地址:http://www.cnblogs.com/wuyudong/p/5939823.html,转载请注明出处. 布局如下: <?xml ...

  9. android 图片性能优化

    本章讲述在android开发中,图片处理方面的优化.包括知识点为大图加载,图片压缩,图片缓存处理及开源图片处理框架Universal-Image-Loader. 1.图片引发的内存不足 当在andro ...

  10. IOS开发之Bug--iOS7View被导航栏遮挡问题的解决

    在实际开发中,遇到在UITextView的frame等于当前控制器的View的frame的情况下,然后运行的时候,发现控制器的Frame的高度y值会从导航条的位置64变化到0. 导致UITextVie ...