详解 $().css('width')和$().width()的区别
在本次项目开发中，经常用jquery获取高度和宽度并且动态加载，有时候用$().css('width')或$().width()这两个方法获取宽度并设置，但是有时候出现获取不到的情况，查阅资料后发现他俩之间即相同又不同。
概念：
1.$().css()
在w3c jQuery的文档中，$().css()方法设置或返回被选元素的一个或多个样式属性。$().css()在设置多个属性时，可以采用对象的形式，但值是字符串的形式(我都经常忽略而出问题)。
2.$().width()
width()函数用于设置或返回当前匹配元素的宽度。返回第一个匹配元素的宽度。如果不为该方法设置参数，则返回以像素计的匹配元素的宽度。
区别：
1.$().css()返回的值带单位，而$().width()不带单位。
<body>
<div style="width:200px;background:red;height:200px">获取该标签的宽度</div>
<script src="jquery.min.js"></script>
<script>
$(function(){
console.log($('div').css('width'));
console.log($('div').width())
})
</script>
</body>
结果如下： 注意颜色，通过typeof检测，说明了前者是字符串，后者是数字
2.$().css()在window,document这些元素对象中获取不到该值，为undefined。而$().width()可以获取该值。后者的适用范围程度>前者。
<body>
<div style="width:200px;background:red;height:200px">获取该标签的宽度</div>
<script src="jquery.min.js"></script>
<script>
$(function(){
console.log($('window').css('width'));
console.log($(window).width())
})
</script>
</body>
结果如下： 为什么$().css()中选择器中是双引号，而$().width()不是，这应该是语法问题，window是个变量，加上引号就代表是常量。
另外：$().width()，在jquery版本为1.4.1后支持参数为函数的形式。
详解 $().css('width')和$().width()的区别的更多相关文章
- CSS width：100%和width：auto的区别
width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...
- canvas里设置width和css里设置width和js里设置width的区别
canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...
- css Media Query详解
Media Queries详解 Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 1 <link href="css/re ...
- [转]CSS hack大全&详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
- css样式之background详解
background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name 规定颜色值为颜色名称的背景颜色(比如 red) he ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- vi和vim区别及命令详解
vi和vim都是Linux中的编辑器,不同的是vim比较高级,可以视为vi的升级版本.vi使用于文本编辑,但是vim更适用于coding. 现将vim的命令行收集于下: vi有3个模式:插入模 ...
- css中的width,height，属性与盒模型的关系
这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...
- jQuery+css+div--一些细节详解
(一).首先.让我们认识一下最基本普通的alert()弹出框!(改变alert()提示弹出框的样式) 我们在写html或是jsp页面的时候,谁都不希望自己精心设计,且非常美观的页面颜色布局被破坏掉吧! ...
随机推荐
- 短视频图像处理 OpenGL ES 实践
2017年,短视频正以其丰富的内容表现力和时间碎片化的特点,快速崛起,而短视频最具可玩性之处就在支持人脸识别的动态贴图和各种不同效果的美颜.滤镜等.那短视频动态贴纸.滤镜.美颜等功能究竟是如何实现的呢 ...
- Android 之异步加载LoaderManager
LoaderManager: Loader出现的背景: Activity是我们的前端页面展现,数据库是我们的数据持久化地址,那么正常的逻辑就是在展示页面的渲染页面的阶段进行数据库查询.拿到数据以后才展 ...
- Linux Ubuntu从零开始部署web环境及项目 -----tomcat+jdk+mysql (二)
上一篇介绍如何在linux系统下搭建ssh环境 这篇开始将如何搭建web服务器 1,下载文件 在官网下载好 tomcat.jdk.mysql的linux压缩包 后缀名为.tar.gz 并通过xftp上 ...
- Angular - Templates(模板)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 在Angular中,模板是一个包含了Angular特定元素和属性的HTML.Angula ...
- c++builder中 扩展c++的关键字 ： _published _automated Get/Set指令 _fastcall
C++Builder为C++增加了许多关键字,以适应其快速应用开发(RAD)环境.包括关键字和Get/Set指令. 1._published类似publich权限范围,_published像publi ...
- HDFS概述（4）————HDFS权限
概述 Hadoop分布式文件系统(HDFS)的权限模型与POSIX模型的文件和目录权限模型一致.每个文件和目录与所有者和组相关联.该文件或目录将权限划分为所有者的权限,作为该组成员的其他用户的权限.以 ...
- Run Away 模拟退火
Run Away Time Limit:5000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- spring框架总结（03）重点介绍（Spring框架的第二种核心掌握）
1.Spring的AOP编程 什么是AOP? ----- 在软件行业AOP为Aspect Oriented Programming 也就是面向切面编程,使用AOP编程的好处就是:在不修改源代码的情 ...
- Java 中静态方法 实例方法 具体方法区别与联系
在查阅JDK文档时,经常会看到某个类的方法汇总,一般会以如下的格式列出来: 这几个标签对应的方法类型分别是什么意思呢? 1. Static Method,静态方法,可以在不创建类实例的情况下,访问 ...
- python之串口操作
1.安装pyserial linux上直接安装: #python2 sudo pip install pyserial #或者python3 sudo pip3 install pyserial Wi ...