jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
var a = 元素本身的宽度;
width() = a;
innerWidth() = a+padding;
outerWidth() = a+padding+border;
outerWidth(true) = a+padding+border+margin;
在jQuery中,
width()方法用于获得元素宽度;
innerWidth()方法用于获得包括内边界(padding)的元素宽度,
outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度,
如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来,即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
同理,innerHeight方法与outerHeight方法也是用同样的方法计算相应的高度。
所以说:对于同一个元素应该是:
width()<=innerWidth()<=outerWidth()<=outerWidth(true); 举个例子:
<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> 输出的结果分别是 200px, 220px, 240px, 260px.
jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别的更多相关文章
- [转]jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别
转自:http://www.cnblogs.com/keyi/p/5933981.html jquery中innerWidth(),outerWidth(),outerWidth(true)和wi ...
- jquery中innerwidth,outerwidth,outerwidth和width的区别
在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别
原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul> <li title='苹果'>苹果</li> ...
- jQuery中的.bind()、.live()和.delegate()之间区别分析
jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下. DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...
- jQuery中的height()、innerheight()、outerheight()的区别总结
在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...
- jQuery中attr()、prop()、data()用法及区别
.attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...
- jquery中的$("#id")与document.getElementById("id")的区别
以前一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天做特效的时候才发现并不是这 ...
- jquery 中的 $("#id") 与 document.getElementById("id") 的区别
以前没注意过,认为jquery 中的 $("#air") 与 document.getElementById("air") 是一回事,指的是同一个东西.在今天写 ...
随机推荐
- 35. CentOS-6.3安装拼音输入法
安装方法: su root yum install "@Chinese Support" // 安装中文输入法 exit 装好后,在“系统-->首选项”就会看到有“ ...
- leetcode130
struct POS { int x; int y; POS(int newx, int newy): x(newx), y(newy) {} }; class Solution { public: ...
- cookie和session的比较
cookie和session的比较 一.对于cookie: ①cookie是创建于服务器端 ②cookie保存在浏览器端 ③cookie的生命周期可以通过cookie.setMaxAge(2000); ...
- 将Ctrl+Alt+Delete键进行屏蔽,防止误操作重启服务器
[root@bgw-t ~]# vi /etc/init/control-alt-delete.conf #exec /sbin/shutdown -r now "Control-Alt- ...
- Eclipse中Ctrl+Shift+f快捷键无效的解决方式
某天突然发现idea非常重要的快捷键ctrl+shift+f无效了,网上搜了很多都说是qq快捷键冲突,但是找了下qq快捷键却没有解决,现在给大家一个解决快捷键冲突的思路: 1.查看QQ快捷键--> ...
- Haskell语言学习笔记(48)Data.Tuple
Data.Tuple fst :: (a,b) -> a fst (x,_) = x snd :: (a,b) -> b snd (_,y) = y curry :: ((a, b) -& ...
- 【Java】JVM(五)、虚拟机类加载机制
一.概念 类加载:虚拟机把类的数据从Class文件加载到内存中,并对数据进行校验,转化解析,和初始化,最终形成可以被虚拟机直接使用的Java类型. 二.加载时机 1.加载 加载阶段虚拟机完成的工作为: ...
- Managing Images on smartos
SmartOS依赖images.images是包含在创建新zone或虚拟机时使用的磁盘或文件系统映像和元数据的模板. images使用imgadm工具进行管理. 使用此工具,您可以: 查看和下载在公共 ...
- 安装Anaconda以及jupyter的使用
1)下载https://www.anaconda.com/download/ 2)安装 3)终端查看(Anaconda Prompt) 4)升级所有的包 初次安装下的软件包版本一般都比较老旧,因此提前 ...
- MVC001之权限校验
参考网址:http://bbs.csdn.net/topics/370002739 http://blog.csdn.net/chenloveyue/article/details/7095522 h ...