不多说,用一图足以说明

首先先解释下普通元素和非普通元素,

  非普通元素是指window,document这些 元素对象,

  普通元素是指除window,document之外的元素,如:div

对于普通的元素 ,他们的作用相同。
比如 
网页上有一个 div 元素:
  <div style="width:200px;height:200px;"></div>
我们可以使用:
  $(function(){
     var width1 = $("div").css("width");
     var width2 = $("div").width();
  })
都可以获取到宽度width。

不过要注意:
.css("width")会带 单位, 例子中 会输出 : 200px ;
.width()则不带单位 , 输出 200 ;

对于非普通元素,只能使用 .width()
如:
我们想获取 window对象的宽度,我们只能使用$(window).width();输出电脑屏幕的宽度;
使用$(window).css("width"); 输出 undifined

width() innerwidth() outerwidth() css('width')的更多相关文章

  1. jQuery中【width(),innerWidth(),outerWidth()】

    这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...

  2. jQuery.width()和jQuery.css('width')的区别

    [TOC] 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确 ...

  3. jQuery—一些常见方法(3)【width(),innerWidth(),outerWidth()】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读

    在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...

  5. jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别

    width()仅仅包括content(内容) innerWidth()包括content(内容)和padding(补白) outerWidth()包括content(内容),padding(补白)和b ...

  6. jquery width(), innerWidth(), outerWidth() 区别

    #div1 { width: 100px; height: 100px; border: 5px black solid; padding: 10px; margin: 10px; backgroun ...

  7. jquery中innerwidth,outerwidth,outerwidth和width的区别

    在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...

  8. JQuery .width()/.css("width")方法 比较

    1. 获取到的值的区别 获取到的为实际宽度,不包括 内边距 和 边框: <div id="aa"> ...... </div> // 1. width() ...

  9. innerWidth outerWidth

    在jQuery中: 一.width()方法用于获得元素宽度: 二.innerWidth()方法用于获得包括内边界(padding)的元素宽度; 三.outerWidth()方法用于获得包括内边界(pa ...

随机推荐

  1. CDOJ 1104 求两个数列的子列的交集 查询区间小于A的数有多少个 主席树

    求两个数列的子列的交集 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1104 ...

  2. 产生不重复的随机数TGUID

    uses ActiveX; procedure TForm1.BtnNewClick(Sender: TObject);var  ID: TGUID;  S: string;begin  if CoC ...

  3. JS 实现2+2=5的代码 实现原理解析

    当我在http://segmentfault.com/q/1010000000531302 看到的时候 先是一惊. 这是代码 g = function () {   H = 3   return H ...

  4. 学习笔记之Lucene

    http://baike.baidu.com/view/371811.htm?fr=aladdin Apache Lucene(http://lucene.apache.org/) Java 全文搜索 ...

  5. ADO.Net的小知识(连接数据库)二

    上次提到数据库连接有两种形式断开式连接和打开式连接,断开式连接我已经讲解了,下面我来给大家讲解一下打开式连接 (1)引入命名空间:using System.Data.SqlClient; 该语句用于导 ...

  6. IT软件开发 书籍汇总

    数据库: MYSQL ->  Effective MySQL 之 SQL 语句最优化   [美] Ronald Bradford 著 李雪锋 译 清华大学出版社 开发书籍 PHP核心技术与最佳实 ...

  7. Events

    Events The idea behind Events is the ability to send data, as parameters, to interested Listeners an ...

  8. Views

    Views Views are the visual side of the Nova, they are the HTML output of the pages. Views can be loc ...

  9. 利用Multipeer Connectivity框架进行WiFi传输

    什么是Multipeer Connectivity? 在iOS7中,引入了一个全新的框架——Multipeer Connectivity(多点连接).利用Multipeer Connectivity框 ...

  10. Android(java)学习笔记86:案例短信发送器

    1.一般我们第一步都是先创建这个main.xml布局文件,这是良好的习惯: <?xml version="1.0" encoding="utf-8"?&g ...