width() innerwidth() outerwidth() css('width')
不多说,用一图足以说明

首先先解释下普通元素和非普通元素,
非普通元素是指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')的更多相关文章
- jQuery中【width(),innerWidth(),outerWidth()】
这个问题,已经别扭我多年了,今天终于彻底解决了,拿出来庆贺一下.jquery作为开源项目,无论从思路上,还是从严谨性上,让人崇敬. 随着时间的流逝,jquery的一些功能被逐渐挖掘出来.通过jQuer ...
- jQuery.width()和jQuery.css('width')的区别
[TOC] 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确 ...
- jQuery—一些常见方法(3)【width(),innerWidth(),outerWidth()】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery height() innerHeight() outerHight() width() innerWidth() outerWidth()源码解读
在第二层each,传入的对象以height举例是这样的,{padding:innerHeight,content:height,"":outerHeight} 对它遍历调用func ...
- jQuery中的width() innerWidth() outerWidth() outerWidth(true)的区别
width()仅仅包括content(内容) innerWidth()包括content(内容)和padding(补白) outerWidth()包括content(内容),padding(补白)和b ...
- jquery width(), innerWidth(), outerWidth() 区别
#div1 { width: 100px; height: 100px; border: 5px black solid; padding: 10px; margin: 10px; backgroun ...
- jquery中innerwidth,outerwidth,outerwidth和width的区别
在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...
- JQuery .width()/.css("width")方法 比较
1. 获取到的值的区别 获取到的为实际宽度,不包括 内边距 和 边框: <div id="aa"> ...... </div> // 1. width() ...
- innerWidth outerWidth
在jQuery中: 一.width()方法用于获得元素宽度: 二.innerWidth()方法用于获得包括内边界(padding)的元素宽度; 三.outerWidth()方法用于获得包括内边界(pa ...
随机推荐
- CDOJ 1104 求两个数列的子列的交集 查询区间小于A的数有多少个 主席树
求两个数列的子列的交集 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1104 ...
- 产生不重复的随机数TGUID
uses ActiveX; procedure TForm1.BtnNewClick(Sender: TObject);var ID: TGUID; S: string;begin if CoC ...
- JS 实现2+2=5的代码 实现原理解析
当我在http://segmentfault.com/q/1010000000531302 看到的时候 先是一惊. 这是代码 g = function () { H = 3 return H ...
- 学习笔记之Lucene
http://baike.baidu.com/view/371811.htm?fr=aladdin Apache Lucene(http://lucene.apache.org/) Java 全文搜索 ...
- ADO.Net的小知识(连接数据库)二
上次提到数据库连接有两种形式断开式连接和打开式连接,断开式连接我已经讲解了,下面我来给大家讲解一下打开式连接 (1)引入命名空间:using System.Data.SqlClient; 该语句用于导 ...
- IT软件开发 书籍汇总
数据库: MYSQL -> Effective MySQL 之 SQL 语句最优化 [美] Ronald Bradford 著 李雪锋 译 清华大学出版社 开发书籍 PHP核心技术与最佳实 ...
- Events
Events The idea behind Events is the ability to send data, as parameters, to interested Listeners an ...
- Views
Views Views are the visual side of the Nova, they are the HTML output of the pages. Views can be loc ...
- 利用Multipeer Connectivity框架进行WiFi传输
什么是Multipeer Connectivity? 在iOS7中,引入了一个全新的框架——Multipeer Connectivity(多点连接).利用Multipeer Connectivity框 ...
- Android(java)学习笔记86:案例短信发送器
1.一般我们第一步都是先创建这个main.xml布局文件,这是良好的习惯: <?xml version="1.0" encoding="utf-8"?&g ...