在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. mysql 在原有的时间上加10个月或者一年

    UPDATE SERVER_TIME_LEFT SET END_TIME = DATE_ADD(END_TIME, INTERVAL 10 MONTH) WHERE SHOP_ID BETWEEN 1 ...

  2. C#属性、自动属性、字段之间的区别和理解

    .ctor是构造方法的意思,注意委托其实也是有构造方法的(不过是编译器自动创建的是私有的)貌似它的参数一个是委托引用的方法所属的对象(或Type对象),一个是该方法的指针: 1.属性的概念其实和字段是 ...

  3. FastDFS分布式文件系统配置文件详解

    一.tracker配置文件详解: # is this config file disabled# false for enabled# true for disableddisabled=false# ...

  4. ASP.NET MVC下使用AngularJs语言(八):显示html

    在Angularjs显示html文本,如果按照一般处理它.它只能页中显示没经解释文本. 在ASP.NET MVC添加一个控制器: 创建angularjs控制器: pilotApp.controller ...

  5. 基于ε-NFA的正则表达式引擎

    正则表达式几乎每个程序员都会用到,对于这么常见的一个语言,有没有想过怎么去实现一个呢?乍一想,也许觉得困难,实际上实现一个正则表达式的引擎并没有想像中的复杂,<编译原理>一书中有一章专门讲 ...

  6. iOS调用QQ发起临时会话

    iOS调用QQ发起临时会话 iOS调用qq前先判断是否安装qq, 之后通过OpenURL打开对用的qq NSURL *url = [NSURL URLWithString:@"mqq://& ...

  7. 不需要 root 权限的 ping

    https://blog.lilydjwg.me/2013/10/29/non-privileged-icmp-ping.41390.html https://stackoverflow.com/qu ...

  8. SQL注入之重新认识

    i春秋作家:anyedt 原文来自:https://bbs.ichunqiu.com/thread-41701-1-1.html 引言 作为长期占据 OWASP Top 10 首位的注入,认识它掌握它 ...

  9. HTTP 总结

    一.概念 特性 1. HTTP协议用于客户端和服务端之间的通信 2. 通过请求和响应的交互达成通信 : HTTP协议规定,请求从客户端发出,最后服务器端响应请求并返回,也就是说,肯定是从客户端开始建立 ...

  10. SQL-2--TRIGGER

    触发器TRIGGER 是一个被指定关联到一个表的数据库对象,当对一个表的特定事件出现时,它将被激活. 触发器是数据库响应 INSERT , UPDATE, DELITE 语句而自动执行的一条SQL语句 ...