在本次项目开发中，经常用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. Mysql修改id自增值

    如果曾经的数据都不需要的话,可以直接清空所有数据,并将自增字段恢复从1开始计数 truncate table 表名 如果想保留之前的记录,从某一id(3356)重新开始 alter table 表名  ...

  2. OpenShift中的持续交付

    上一文中讲述了如何在AWS下搭建OpenShift集群.这篇文章将目光转向如何在OpenShift中实现CI/CD以及产品环境的部署. 持续交付 如果要打造一个持续交付的流水线,首先要考虑多环境的问题 ...

  3. React获得真实的DOM操作

    真实的DOM操作 ------------------------------------------------------------------------------------------- ...

  4. Redis学习——redis.conf 配置文件介绍

    学以致用 学在用前 参看文章: redis.conf 配置详解 Redis配置文件详解(redis.conf)-云栖社区 在Redis的使用过程,除了知道对Redis五种数据类型的操作方法之外,最主要 ...

  5. 关于JetBrains CLion 激活 （CLion License Activation）的解决办法，带hosts详细修改

    CLion版本号:JetBrains CLion 2017.2.1 第一行选择Activite,第二行Activate license with:选择Activation code. 这个时候里面的代 ...

  6. 用matlab给图像加高斯噪声和椒盐噪声（不调用imnoise函数）

    图像画面中的噪声,大致可以分为两类:高斯噪声和椒盐噪声.在这里,我们先看下图像中两种噪声各自的特征. 椒盐噪声:噪声幅值基本相同,但出现位置随机. 高斯噪声:图像中每一点都存在噪声,但幅值是随机分布的 ...

  7. NOIP2017SummerTraining0717

    个人感受:自己水平是真的差劲,和他们不是一个档次的,第二题,如果不是陈载元暴力过了,我也不会那么早去A了第二题,第一题真的是无语,以前做到过,还想到了每个对应值a[i]-i,但是没想出来,真的是 可惜 ...

  8. 斐波那契数列第N项f(N)[矩阵快速幂]

    矩阵快速幂 定义矩阵A(m*n),B(p*q),A*B有意义当且仅当n=p.即A的列数等于B的行数. 且C=A*B,C(m*q). 例如: 进入正题,由于现在全国卷高考不考矩阵,也没多大了解.因为遇到 ...

  9. SQL Server Compact/SQLite Toolbox 使用

    最近一个嵌入式的数据库用的SqlCe 需要导入到Sqlite, 网上查到了这个工具--SQL Server Compact/SQLite Toolbox.但是在使用的时候遇到了一点小曲折,记录下来给需 ...

  10. C#下的两种加密方式MD5和DEC

    md5加密 /// <summary>    /// MD5加密    /// </summary>    /// <param name="toCryStri ...