区分width()、css('width')、innerWidth()
- #widthTest1 {
- width: 200px;
- height: 200px;
- background-color: #00CCFF;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- padding: 10px;
- border: 5px solid red;
- }
- #widthTest2 {
- margin-top: 30px;
- width: 200px;
- height: 200px;
- background-color: #00CCFF;
- padding: 10px;
- border: 5px solid red;
- }
- <div id="widthTest1">width test1</div>
- <div id="widthTest2">width test2</div>
- $(function(){
- // .width()总是返回内容宽度,不管CSS box-sizing属性值.
- // 截至jQuery 1.8,这可能需要检索的CSS的宽度加加上box-sizing的属性,
- // 然后当元素有 box-sizing: border-box时候,减去个元素上任何潜在border和padding值。
- // 为了避免这种问题,使用.css( "width" )而非.width()。
- console.log('widthTest1 .width()'+$('#widthTest1').width()); // 170
- console.log('widthTest2 .width()'+$('#widthTest2').width()); //
- //第一个内容宽度是170 第二个内容宽度是200 两者主要区别是box-sizing:border-box;
- // innerWidth() 包括padding,但是不包括border。
- console.log('widthTest1 .width()'+$('#widthTest1').innerWidth()); // 190 = 200 - 5*2
- console.log('widthTest1 .width()'+$('#widthTest2').innerWidth()); // 220 = 200 + 20
- console.log('widthTest1 css("width")'+$('#widthTest1').css('width')); // 200px
- console.log('widthTest2 css("width")'+$('#widthTest2').css('width')); // 200px
- });
区分width()、css('width')、innerWidth()的更多相关文章
- JQuery .width()/.css("width")方法 比较
1. 获取到的值的区别 获取到的为实际宽度,不包括 内边距 和 边框: <div id="aa"> ...... </div> // 1. width() ...
- width() innerwidth() outerwidth() css('width')
不多说,用一图足以说明 首先先解释下普通元素和非普通元素, 非普通元素是指window,document这些 元素对象, 普通元素是指除window,document之外的元素,如:div 对于普通的 ...
- jQuery.width()和jQuery.css('width')的区别
[TOC] 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确 ...
- css width="100" style ="width:100px" 区别
1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...
- JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别
整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...
- 详解 $().css('width')和$().width()的区别
在本次项目开发中,经常用jquery获取高度和宽度并且动态加载,有时候用$().css('width')或$().width()这两个方法获取宽度并设置,但是有时候出现获取不到的情况,查阅资料后发现他 ...
- jquery .width和css("width", )区别
1.$.fn.width会根据是否是borderBox来计算新的宽度,如果是borderBox,会额外加上padding和border的宽度,计算时只是按照px来,用rem做单位会出错: 2.$.fn ...
- css var & auto width css triangle
css var & auto width css triangle https://codepen.io/xgqfrms/pen/PooeEbd css var https://codepen ...
- offsetHeight/Width clientHeight/Width scrollHeight/Width等高宽算法
图解: jquery里的对应取法: clientHeight/Width:innerHeight/Width(), offsetHeight/Width: outerHeight/Width(). w ...
随机推荐
- Android缓存技术
android应用程序中 1. 尽可能的把文件缓存到本地.可以是 memory,cache dir,甚至是放进 SD 卡中(比如大的图片和音视频). 可以设置双重缓冲,较大的图片或者音频放到SD ...
- codevs1044四子连棋(Dfs)
/* 数据范围太小 暴力暴力 Dfs直接 终止条件嘛 就是4中目标棋局 挨着枚举一遍就好了 搜索的起点一定是空格 当然 空格周围有黑有白 黑先走或者白先走答案可能不一样 所以 维护一个b 表示这一步走 ...
- iOS开发: 向右滑动手势功能实现
在navigationController中实现向右滑动 返回功能 系统提供的backbarbuttonitem,不用添加任何代码即可实现向右滑动后退功能,但是往往要对按钮修改样式等时,就需要自定义l ...
- JSON.parse和JSON.stringify 参数详解
JSON.parse和JSON.stringify这两个浏览器自带(IE6/7除外)的方法平常我们经常用到,但是一般都只是用到了他们的第一个参数,比如字符串转对象:JSON.parse('{}') ...
- C++ 性能剖析 (三):Heap Object对比 Stack (auto) Object
通常认为,性能的改进是90 ~ 10 规则, 即10%的代码要对90%的性能问题负责.做过大型软件工程的程序员一般都知道这个概念. 然而对于软件工程师来说,有些性能问题是不可原谅的,无论它们属于10% ...
- Jssdk微信分享
<?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourApp ...
- Swift互用性: 使用Objective-C特性编写Swift类(Swift 2.0版)-b
本节包括内容: 继承Objective-C的类(Inheriting from Objective-C Classes) 采用协议(Adopting Protocols) 编写构造器和析构器(Writ ...
- 转:Google论文之三----MapReduce
文章来自于:http://www.cnblogs.com/geekma/p/3139823.html MapReduce:大型集群上的简单数据处理 摘要 MapReduce是一个设计模型,也是一个处理 ...
- Resharper 8.0 的最实用的功能
在 8.0 里面.resharper 加入了 插件nuget方式 以前引用resharper插件.都是从新安装,复制进去,或者其他方式.比如resharper xunit 测试 我用xunit 插件 ...
- Multiplication Table
CF#256D:http://codeforces.com/contest/448/problem/D 题意:给你一个n*m的表格,第i行第j列的数据是i*j,然后询问第k小的数,这里的排序是不去重的 ...