jquery中innerwidth,outerwidth,outerwidth和width的区别
在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的区别的更多相关文章
- jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...
- [转]jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
转自:http://www.cnblogs.com/keyi/p/5933981.html jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...
- jQuery中效果animate方法解决width是百分比出现的问题
jQuery中效果animate方法解决width是百分比出现的问题 http://www.mafutian.net/131.html 问题描述: 效果如图,初始化,每个层宽20%,采用animate ...
- jquery中,size()和length()方法有啥区别
jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...
- jQuery中hover与mouseover和mouseout的区别分析
本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于h ...
- [转载]jQuery中的html,val,text区别
在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...
- jquery中$.get()提交和$.post()提交有区别
jquery中$.get()提交和$.post()提交有区别吗? 相同点:都是异步请求的方式来获取服务端的数据: 异同点: 1.请求方式不同:$.get() 方法使用GET方法来进行异步请求的.$.p ...
- Jquery中bind和live.one,delegate的区别
Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...
- jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...
随机推荐
- 获取sql 时间时分秒
select DATE_FORMAT(now(),'%Y-%m-%d %T') from dual; 年月日时分秒 select DATE_FORMAT(now(),'%T') from dual; ...
- 软件推荐-有限元开发软件FELAC
首页:http://yuanjisuan.cn/ 有限元语言及其编译器(Finite Element Language And it’s Compiler),以下简称FELAC是中国科学院数学与系统科 ...
- 6.8 lambda方法 6.9 枚举类
6.9枚举 对于对象个数有限的类可以用枚举类来避免创建对象的随意性. 枚举类关键字enum,是一种特殊的类:构造器只能用private修饰,枚举类的所有实例在第一行举出(系统默认用public sta ...
- 冲刺博客NO.9
今天做了什么: 看书,看视频学UI设计,尝试设计并美化,然并没有美感,感觉自己设计的界面太丑. 主体进度差不多完成了,美化.
- 文件描述符fd、文件指针fp和vfork()
1. fd:在形式上是一个非负整数.实际上他是一个索引值.指向kernal为每一个进程所维护的该进程打开文件的记录表. 当程序打开一个文件或者创建一个新文件的时候kernal向进程返回一个文件描述符. ...
- Spark中的Phoenix Dynamic Columns
代码及使用示例:https://github.com/wlu-mstr/spark-phoenix-dynamic phoenix dynamic columns HBase的数据模型是动态的,很多系 ...
- 库函数wordcloud安装的问题
在对python有了一定的了解之后就对python的第三方库产生了十分浓厚的兴趣,因为python的很多功能都是要依靠第三方库函数来实现的,而且在计算机二级刚刚加入的python考试中也有对第三方库的 ...
- 使用 IncrediBuild 提升 VisualStudio 编译速度
我现在有一个 100M 的代码,需要快速去编译他,我寻找了很多方法,本文记录我找到的 IncrediBuild 用于提交编译速度. 如果一个项目存在很多不相互依赖的项目,那么使用 IncrediBui ...
- 「WC2018」州区划分(FWT)
「WC2018」州区划分(FWT) 我去弄了一个升级版的博客主题,比以前好看多了.感谢 @Wider 不过我有阅读模式的话不知为何 \(\text{LATEX}\) 不能用,所以我就把这个功能删掉了. ...
- React中的“双向绑定”
概述 React并不是一个MVVM框架,其实它连一个框架都算不上,它只是一个库,但是react生态系统中的flux却是一个MVVM框架,所以我研究了一下flux官方实现中的"双向绑定&quo ...