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 ...
随机推荐
- 多线程编程(一) - 关于C#中Thread.Join()
Thread.Join()在MSDN中的解释很模糊:Blocks the calling thread until a thread terminates 有两个主要问题:1.什么是the calli ...
- android学习日记28--Android中常用设计模式总结
一.综述 设计模式,根据前人经验总结出常见软件工程问题的解决思想套路.GoF一共归纳了23种设计模式,当然还有人扩充,不止这些.设计模式主要利用面向对象语言的特性,而android 的设计主要用JAV ...
- android124 zhihuibeijing 新闻中心-组图
package com.itheima.zhbj52.base.menudetail; import java.util.ArrayList; import android.app.Activity; ...
- 分享SVN的钩子代码[借鉴学习]pre-commit-post 钩子
#/bin/bash REPOS=$1 TXN=$2 export HOME=/ export PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/us ...
- java_jdbc_batch处理_主键id获取
//create1 速度较慢,create2较快,但是要根据数据库不同来决定 //ps = conn.prepareStatement(sql, Statement.RETURN_GENERATED_ ...
- java中public等权限问题和final的使用
1.public:public表明该数据成员.成员函数是对所有用户开放的,所有用户都可以直接进行调用 2.private:private表示私有,私有的意思就是除了class自己之外,任何人都不可以直 ...
- jquery中的index方法
问题描述:灵活使用jquery中的index方法 方法签名:index([selector|element]) 用法概述:P1.index(P2) //调用者P1可以为对象或集合 参数为空,返回P1 ...
- VS版本下载
tfs2012:BVGTF-T7MVR-TP46H-9Q97G-XBXRB http://www.microsoft.com/zh-cn/download/details.aspx?id=30658 ...
- 20150503-struts2入门-标签
一.几个标签介绍 1.property标签 property标签用于输出指定值: <s:set name="name" value="'kk'" /> ...
- Android之Http网络编程(三)
在前面两篇博客<Android之Http网络编程(一)>.<Android之Http网络编程(二)>中,简单的介绍了对网页的请求和客户端与服务端的简单的参数交互.那么,这一篇博 ...