1. #widthTest1 {
  2. width: 200px;
  3. height: 200px;
  4. background-color: #00CCFF;
  5. -webkit-box-sizing: border-box;
  6. -moz-box-sizing: border-box;
  7. box-sizing: border-box;
  8. padding: 10px;
  9. border: 5px solid red;
  10. }
  11.  
  12. #widthTest2 {
  13. margin-top: 30px;
  14. width: 200px;
  15. height: 200px;
  16. background-color: #00CCFF;
  17. padding: 10px;
  18. border: 5px solid red;
  19. }
  20. <div id="widthTest1">width test1</div>
  21. <div id="widthTest2">width test2</div>

  1. $(function(){
  2.   // .width()总是返回内容宽度,不管CSS box-sizing属性值.
  3. // 截至jQuery 1.8,这可能需要检索的CSS的宽度加加上box-sizing的属性,
  4.   // 然后当元素有 box-sizing: border-box时候,减去个元素上任何潜在border和padding值。
  5.   // 为了避免这种问题,使用.css( "width" )而非.width()。
  6.   console.log('widthTest1 .width()'+$('#widthTest1').width()); // 170
  7.   console.log('widthTest2 .width()'+$('#widthTest2').width()); //
  8.   //第一个内容宽度是170 第二个内容宽度是200 两者主要区别是box-sizing:border-box;
  9.  
  10. // innerWidth() 包括padding,但是不包括border。
  11. console.log('widthTest1 .width()'+$('#widthTest1').innerWidth()); // 190 = 200 - 5*2
  12. console.log('widthTest1 .width()'+$('#widthTest2').innerWidth()); // 220 = 200 + 20
  13.  
  14.   console.log('widthTest1 css("width")'+$('#widthTest1').css('width')); // 200px
  15.   console.log('widthTest2 css("width")'+$('#widthTest2').css('width')); // 200px
  16. });

区分width()、css('width')、innerWidth()的更多相关文章

  1. JQuery .width()/.css("width")方法 比较

    1. 获取到的值的区别 获取到的为实际宽度,不包括 内边距 和 边框: <div id="aa"> ...... </div> // 1. width() ...

  2. width() innerwidth() outerwidth() css('width')

    不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...

  3. jQuery.width()和jQuery.css('width')的区别

    [TOC] 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确 ...

  4. css width="100" style ="width:100px" 区别

    1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...

  5. JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别

    整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...

  6. 详解 $().css('width')和$().width()的区别

    在本次项目开发中,经常用jquery获取高度和宽度并且动态加载,有时候用$().css('width')或$().width()这两个方法获取宽度并设置,但是有时候出现获取不到的情况,查阅资料后发现他 ...

  7. jquery .width和css("width", )区别

    1.$.fn.width会根据是否是borderBox来计算新的宽度,如果是borderBox,会额外加上padding和border的宽度,计算时只是按照px来,用rem做单位会出错: 2.$.fn ...

  8. css var & auto width css triangle

    css var & auto width css triangle https://codepen.io/xgqfrms/pen/PooeEbd css var https://codepen ...

  9. offsetHeight/Width clientHeight/Width scrollHeight/Width等高宽算法

    图解: jquery里的对应取法: clientHeight/Width:innerHeight/Width(), offsetHeight/Width: outerHeight/Width(). w ...

随机推荐

  1. Android缓存技术

    android应用程序中 1. 尽可能的把文件缓存到本地.可以是 memory,cache dir,甚至是放进 SD 卡中(比如大的图片和音视频).    可以设置双重缓冲,较大的图片或者音频放到SD ...

  2. codevs1044四子连棋(Dfs)

    /* 数据范围太小 暴力暴力 Dfs直接 终止条件嘛 就是4中目标棋局 挨着枚举一遍就好了 搜索的起点一定是空格 当然 空格周围有黑有白 黑先走或者白先走答案可能不一样 所以 维护一个b 表示这一步走 ...

  3. iOS开发: 向右滑动手势功能实现

    在navigationController中实现向右滑动 返回功能 系统提供的backbarbuttonitem,不用添加任何代码即可实现向右滑动后退功能,但是往往要对按钮修改样式等时,就需要自定义l ...

  4. JSON.parse和JSON.stringify 参数详解

    JSON.parse和JSON.stringify这两个浏览器自带(IE6/7除外)的方法平常我们经常用到,但是一般都只是用到了他们的第一个参数,比如字符串转对象:JSON.parse('{}')   ...

  5. C++ 性能剖析 (三):Heap Object对比 Stack (auto) Object

    通常认为,性能的改进是90 ~ 10 规则, 即10%的代码要对90%的性能问题负责.做过大型软件工程的程序员一般都知道这个概念. 然而对于软件工程师来说,有些性能问题是不可原谅的,无论它们属于10% ...

  6. Jssdk微信分享

    <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourApp ...

  7. Swift互用性: 使用Objective-C特性编写Swift类(Swift 2.0版)-b

    本节包括内容: 继承Objective-C的类(Inheriting from Objective-C Classes) 采用协议(Adopting Protocols) 编写构造器和析构器(Writ ...

  8. 转:Google论文之三----MapReduce

    文章来自于:http://www.cnblogs.com/geekma/p/3139823.html MapReduce:大型集群上的简单数据处理 摘要 MapReduce是一个设计模型,也是一个处理 ...

  9. Resharper 8.0 的最实用的功能

    在 8.0 里面.resharper 加入了 插件nuget方式 以前引用resharper插件.都是从新安装,复制进去,或者其他方式.比如resharper xunit  测试 我用xunit 插件 ...

  10. Multiplication Table

    CF#256D:http://codeforces.com/contest/448/problem/D 题意:给你一个n*m的表格,第i行第j列的数据是i*j,然后询问第k小的数,这里的排序是不去重的 ...