在本次项目开发中，经常用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()的区别的更多相关文章

  1. CSS width：100%和width：auto的区别

    width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...

  2. canvas里设置width和css里设置width和js里设置width的区别

    canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...

  3. css Media Query详解

    Media Queries详解 Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: 1 <link href="css/re ...

  4. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  5. css样式之background详解

    background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) he ...

  6. 1:CSS中一些@规则的用法小结 2: @media用法详解

    第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

  7. vi和vim区别及命令详解

    vi和vim都是Linux中的编辑器,不同的是vim比较高级,可以视为vi的升级版本.vi使用于文本编辑,但是vim更适用于coding.     现将vim的命令行收集于下: vi有3个模式:插入模 ...

  8. css中的width,height，属性与盒模型的关系

    这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...

  9. jQuery+css+div--一些细节详解

    (一).首先.让我们认识一下最基本普通的alert()弹出框!(改变alert()提示弹出框的样式) 我们在写html或是jsp页面的时候,谁都不希望自己精心设计,且非常美观的页面颜色布局被破坏掉吧! ...

随机推荐

  1. Oracle总结第二篇【视图、索引、事务、用户权限、批量操作】

    前言 在Oracle总结的第一篇中,我们已经总结了一些常用的SQL相关的知识点了-那么本篇主要总结关于Oralce视图.序列.事务的一些内容- 在数据库中,我们可以把各种的SQL语句分为四大类- (1 ...

  2. Mybatis（1）

    properties 标签的作用引入外部properties 文件的内容typeAliases 的作用可以用package这个标签批量给这个包下的所有类起一个别名 name属性写包的名字. 默认别名为 ...

  3. Coder的好伙伴Github

    网络越来越发达,各式各样的网盘.云存储也走进日常生活,  在老师的指导下,我第一次接触了GitHub. 什么是Github? Github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一 ...

  4. BZOJ1207_打鼹鼠_KEY

    [HNOI2004]打鼹鼠 Time Limit: 10 Sec Memory Limit: 162 MB Description 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地 ...

  5. 二、js的控制语句

    二.流程控制语句 ECMA-262规定了一组流程控制语句.语句定义了ECMAScript中的主要语法,语句通常由一个或者多个关键字来完成给定的任务.诸如:判断.循环.退出等.   语句的定义   在E ...

  6. ch340是什么芯片

    CH340 是一个USB 总线的转接芯片,实现USB 转串口.USB 转IrDA 红外或者USB 转打印口.     在串口方式下,CH340 提供常用的MODEM联络信号,用于为计算机扩展异步串口, ...

  7. Android Studio安装应用时报错 installation failed with message Failed to finalize session......

    解决方法: 在AndroidManifest.xml中的provider中的authorities后加几个数字即可. 2017.09.01: 我发现有的项目AndroidManifest.xml中没有 ...

  8. Java课堂作业01

    题目:编写一个程序,此程序从命令行接收多个数字,求和之后输出结果. 设计思想:用for循环将string型转换为int型,再用sum求和,使其一直相加,到达最大长度,sum即为所求sum. 程序流程图 ...

  9. Spring详解（七）------事务管理

    PS:本篇博客源码下载链接:http://pan.baidu.com/s/1mi3NhX2 密码:3io2 1.事务介绍 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指 ...

  10. HAProxy安装文档

    HAProxy安装文档 [toc][TOC] 一.环境说明 系统环境:CentOS Linux release 7.2.1511 (Core) 系统内核:3.10.0-327.el7.x86_64 软 ...