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()的区别的更多相关文章

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

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

  2. jquery中innerwidth,outerwidth,outerwidth和width的区别

    在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...

  3. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  4. [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别

    原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul>   <li title='苹果'>苹果</li>   ...

  5. jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下.   DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...

  6. jQuery中的height()、innerheight()、outerheight()的区别总结

    在前端jQuery代码中突然看到outerheight(),第一感觉就是,这是什么鬼?然后仔细查阅了一下,居然发现还有这么多相似的东西. 在jQuery中,获取元素高度的函数有3个,它们分别是heig ...

  7. jQuery中attr()、prop()、data()用法及区别

    .attr(),此方法从jq1.0开始一直存在,官方文档写的作用是读/写DOM的attribute值,其实1.6之前有时候是attribute,有时候又是property..prop(),此方法jq1 ...

  8. jquery中的$("#id")与document.getElementById("id")的区别

    以前一直认为jquery中的$("#id")和document.getElementByIdx_x("id")得到的效果是一样的,今天做特效的时候才发现并不是这 ...

  9. jquery 中的 $("#id") 与 document.getElementById("id") 的区别

    以前没注意过,认为jquery 中的 $("#air") 与 document.getElementById("air") 是一回事,指的是同一个东西.在今天写 ...

随机推荐

  1. 35. CentOS-6.3安装拼音输入法

    安装方法: su root yum install "@Chinese Support"      // 安装中文输入法 exit 装好后,在“系统-->首选项”就会看到有“ ...

  2. leetcode130

    struct POS { int x; int y; POS(int newx, int newy): x(newx), y(newy) {} }; class Solution { public: ...

  3. cookie和session的比较

    cookie和session的比较 一.对于cookie: ①cookie是创建于服务器端 ②cookie保存在浏览器端 ③cookie的生命周期可以通过cookie.setMaxAge(2000); ...

  4. 将Ctrl+Alt+Delete键进行屏蔽,防止误操作重启服务器

    [root@bgw-t ~]# vi  /etc/init/control-alt-delete.conf #exec /sbin/shutdown -r now "Control-Alt- ...

  5. Eclipse中Ctrl+Shift+f快捷键无效的解决方式

    某天突然发现idea非常重要的快捷键ctrl+shift+f无效了,网上搜了很多都说是qq快捷键冲突,但是找了下qq快捷键却没有解决,现在给大家一个解决快捷键冲突的思路: 1.查看QQ快捷键--> ...

  6. Haskell语言学习笔记(48)Data.Tuple

    Data.Tuple fst :: (a,b) -> a fst (x,_) = x snd :: (a,b) -> b snd (_,y) = y curry :: ((a, b) -& ...

  7. 【Java】JVM(五)、虚拟机类加载机制

    一.概念 类加载:虚拟机把类的数据从Class文件加载到内存中,并对数据进行校验,转化解析,和初始化,最终形成可以被虚拟机直接使用的Java类型. 二.加载时机 1.加载 加载阶段虚拟机完成的工作为: ...

  8. Managing Images on smartos

    SmartOS依赖images.images是包含在创建新zone或虚拟机时使用的磁盘或文件系统映像和元数据的模板. images使用imgadm工具进行管理. 使用此工具,您可以: 查看和下载在公共 ...

  9. 安装Anaconda以及jupyter的使用

    1)下载https://www.anaconda.com/download/ 2)安装 3)终端查看(Anaconda Prompt) 4)升级所有的包 初次安装下的软件包版本一般都比较老旧,因此提前 ...

  10. MVC001之权限校验

    参考网址:http://bbs.csdn.net/topics/370002739 http://blog.csdn.net/chenloveyue/article/details/7095522 h ...