在jQuery中,width()方法用于获得元素宽度;

innerWidth()方法用于获得包括内边界(padding)的元素宽度,

outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,

如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。

同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说:对于同一个元素应该是:width()<=innerWidth()<=outerWidth()<=outerWidth(true);

再给你一个实例,前提是正确导入jQuery,即可运行。
代码中将p元素的宽度设计为200px;运行会输出200、220、240、260。

<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
var obj=$("#p_obj");
alert(obj.width());
alert(obj.innerWidth());
alert(obj.outerWidth());
alert(obj.outerWidth(true));
});
});
</script>
<p id="p_obj" style=" width:200px; padding:10px; border:10px solid blue; margin:10px;">This is a paragraph.</p>
<button class="btn1">输出高度</button>

jquery中innerwidth,outerwidth,outerwidth和width的区别的更多相关文章

  1. jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别

    jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...

  2. [转]jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别

    转自:http://www.cnblogs.com/keyi/p/5933981.html   jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...

  3. jQuery中效果animate方法解决width是百分比出现的问题

    jQuery中效果animate方法解决width是百分比出现的问题 http://www.mafutian.net/131.html 问题描述: 效果如图,初始化,每个层宽20%,采用animate ...

  4. jquery中,size()和length()方法有啥区别

    jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...

  5. jQuery中hover与mouseover和mouseout的区别分析

    本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...

  6. [转载]jQuery中的html,val,text区别

    在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...

  7. jquery中$.get()提交和$.post()提交有区别

    jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...

  8. Jquery中bind和live.one,delegate的区别

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...

  9. jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

随机推荐

  1. sax 动态切换 抓取感兴趣的内容(把element当做documnet 处理)

    由switch 类触发事件 import org.xml.sax.Attributes; import org.xml.sax.SAXException; import org.xml.sax.hel ...

  2. jsp页面有一个注册form表单,传值的时候后台接收到的全部是null

    [页面上的传值元素一定要有name属性才可在后台接受到参数的值.切记!] 此处一定要注意,form表单里面的元素,比如input元素是否和后台的requset.getparameter();中的参数名 ...

  3. Alpha冲刺 - (8/10)

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 进一步优化代码,结合自己负责的部分修 ...

  4. verilog HDL -模块代码基本结构

    1--verilog HDL 语言的预编译指令作用:指示在编译verliog HDL源代码前,需要执行哪些操作. 2--模块内容是嵌在module 和endmodule两个语句之间.每个模块实现特定的 ...

  5. Android-Java-子类实例化过程(内存图)

    案例一: package android.java.oop15; // 描述Person对象 class Person { // 构造方法就算不写 默认有一个隐式的无参构造方法:public Pers ...

  6. Thinking in Java from Chapter 21

    From Thinking in Java 4th Edition 并发 线程可以驱动任务,因此你需要一种描述任务的方式,这可由Runnable接口来提供. 要想定义任务,只需要实现Runnable接 ...

  7. Cordova - 安装camera插件之后编译错误解决方法!

    安装camera插件之后,编译出错,错误截图如下: 刚开始以为是AAPT编译导致的,尝试关闭AAPT编译选项,但是不行,认真看了一下编译出错信息,应该是缺少文件导致的,随后在对应的目录中加入了缺失的文 ...

  8. Windows UDP sockets: recvfrom() fails with error 10054

    https://stackoverflow.com/questions/34242622/windows-udp-sockets-recvfrom-fails-with-error-10054 #in ...

  9. SQL注入的优化和绕过

    作者:Arizona 原文来自:https://bbs.ichunqiu.com/thread-43169-1-1.html 0×00 ~ 介绍 SQL注入毫无疑问是最危险的Web漏洞之一,因为我们将 ...

  10. Java学习笔记41(Properties类)

    Properties可以做到集合的数据持久存储 它是map接口的一个实现类,可以使用map类的方法, 不过存在区别:它没有泛型,规定键类型为字符串 这个集合在以后的开发中会经常用到,比如连接数据库等 ...