在本次项目开发中，经常用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. Eclipse集成spket插件_Ext-5.1.0

    1, spket-1.6.23.jar下载 官网下载:http://www.spket.com/download.html ,  百度网盘地址: http://pan.baidu.com/s/1qXH ...

  2. SpringMVC基础入门，创建一个HelloWorld程序

    ref:http://www.admin10000.com/document/6436.html 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要 ...

  3. 页面设计-数据列表 DataGrid

    传统软件项目开发时,针对每个业务单据页面需要每控件一个一个的来设计,同时需要在页面功能中对每个控件的属性进行判定处理,尤其是页面风格布局样式需要花去一大半的时间,并且后续要想修改是非常麻烦繁琐,这样就 ...

  4. 西邮linux兴趣小组2014纳新免试题（四）

    [第四关] 题目 http://findakey.sinaapp.com/ Example: String1:FFFF8 5080D D0807 9CBFC E4A04 24BC6 6C840 49B ...

  5. Spring Boot-------JPA——EntityManager构建通用DAO

    EntityManager EntityManager 是用来对实体Bean 进行操作的辅助类.他可以用来产生/删除持久化的实体Bean,通过主键查找实体bean,也可以通过EJB3 QL 语言查找满 ...

  6. 在Ubuntu终端彻底删除软件

    在Ubuntu终端彻底删除软件 1.删除软件 方法一.如果你知道要删除软件的具体名称,可以使用 sudo apt-get remove --purge 软件名称 sudo apt-get autore ...

  7. java数据库编程之高级查询

    第三章:高级查询(-) 3.1:修改表 3.1.1:修改表 语法: Alter table <旧表名> rename [ TO] <新表名>; 例子:Alter table ` ...

  8. ios实现无限后台任务

    需求 我们的app是使用心跳机制来保持用户的登陆状态,这样才能收到服务器发来的消息和命令,但是当app进入后台以后大约3分钟或者10分钟之后app就会被系统挂起,用户就会超时下线,这样就必须保持app ...

  9. Ghost文件封装说明

    一.先列举目前Windows系统安装方式: 1.光盘安装 1.1 使用可刻录光驱将系统ISO文件刻录至DVD光盘,刻录工具比较多,QA目前使用Ultra ISO. 1.2 安装电脑从DVD光盘启动,无 ...

  10. HDU1223 Order Count 动态规划 组合数

    动态规划+组合数+大数 #include<cstdio> #include<cstdlib> #include<iostream> #include<algo ...