我们默认都统一是采用offsetWidth或者offsetHeight取值了，但我们知道关于这2个尺寸的算法是这样的：

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width;

offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width;

不在考虑box-sizing:padding-box的情况下，也就差不多了。但是关于尺寸的接口不是还有

innerWidth、innerHeight、outerWidth、outerHeight这些类似的处理吗？当然虽然都是获取尺寸还是有区别的。

innerWidth、innerHeight

用于获得匹配集合中第一个元素的当前计算的内部宽高（包括padding，但不包括border），或 设置每一个匹配元素的内部宽高。

outerWidth、outerHeight

获取元素集合中第一个元素的当前计算宽高度值,包括padding，border和选择性的margin

针对这些情况，jQuery不得不给出一个方法用来去掉对应的值，这个是对应的augmentWidthOrHeight方法

我们具体看看怎么计算的

innerWidth = ele.offsetWidth –ele.borderRightWidth –ele.borderLeftWidth

innerHeight = ele.offseHeight –ele.borderTopHeight –ele.borderBottomHeight

outerWidth如果不传递参数，那么算法就跟innerWidth一样

如果传递outerWidth(true)就需要加上margin

outerWidth(true) = ele.offsetWidth + ele.marginLeft + ele.marginRight

outerHeigth(true) = ele.offsetHeigth + ele.marginTop + ele.marginBottom

关于jQuery6个尺寸方法的接口算法就是这样的了

jQuery尺寸算法的更多相关文章

  1. 实现文字自动横移--- jquery尺寸相关函数

    效果图: 一实现文字自动横移 <style type="text/css"> #demo {overflow:scroll;width:740px; } #indemo ...

  2. jQuery 基础(4)jQuery 尺寸

    jQuery 尺寸方法jQuery 提供多个处理尺寸的重要方法:width()height()innerWidth()innerHeight()outerWidth()outerHeight()jQu ...

  3. jQuery 尺寸

    通过 jQuery,很容易处理元素和浏览器窗口的尺寸. jQuery 尺寸 方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHe ...

  4. 关于jquery尺寸的总结

    以前总是对jquery的尺寸稀里糊涂,有需要的可以看下下面的代码: ①页面布局如下: <!doctype html> <html> <head> <meta ...

  5. jquery尺寸和jQuery设置和获取内容方法

    一.jquery尺寸 jQuery 提供多个处理尺寸的重要方法: width()    设置或返回元素的宽度(不包括内边距.边框或外边距),括号中可填数值宽度参数,无单位 height()   设置或 ...

  6. jQuery尺寸

    jQuery 尺寸 jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包 ...

  7. 图解JQUERY尺寸及位置定义

    最近在学习JQUERY的一些应用,接触到了JQUERY对于元素尺寸及位置定义,还有就是配合浏览器尺 寸及状态的计算所做出的一些动画特效.其实像这类JQUERY应用无外乎涉及这些属性的调用:innerH ...

  8. jQuery 尺寸 方法

    jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHeight()

  9. jquery——尺寸

    1. 获取和设置元素的尺寸 2. 获取元素相对页面的绝对位置:offset() 这种方式增加的盒子不会对之前的结构产生影响 demo: <!DOCTYPE html> <html l ...

随机推荐

  1. Unity 通过 www 下载 assetbundle , 在 iOS9 设备无法下载的问题

    我们项目是通过 www 下载 Assetbundle 来实现热更新的, 在 iOS 8上一切正常,但在 iOS9 设备上发现无法下载,跟踪调试发现以下错误信息 “App Transport Secur ...

  2. html5+css3 制作音乐播放器

    //css// body , html{    margin:0;    padding:0;    font:12px Arial, Helvetica, sans-serif;    } .Mus ...

  3. nginx实时记录请求状态信息( ngx_realtime_request_module)

    cd /usr/local/src/ wget "http://nginx.org/download/nginx-1.4.2.tar.gz" tar -xzvf nginx.tar ...

  4. JavaScript 基础第五天

    一.引言 前面我们讨论了函数的一些基本概念,因为函数在任何一门语言之中都是很重要所以还是要好好学.昨天打开博客的时候看到有人私信我的JavaScript写错了,我定睛一看果然写错了.对此我表示很抱歉, ...

  5. 使用Code::blocks在windows下写网络程序

    使用Code::blocks在windows下写网络程序 作者 He YiJun – storysnail<at>gmail.com 团队 ls 版权 转载请保留本声明! 本文档包含的原创 ...

  6. AWIT DBackup 0.0.20 发布，备份系统

    AWIT DBackup 0.0.20 修复了几个小 bug. AllWorldIT DBackup 是一个备份系统,为每个目录创建一个独立的压缩包,这更便于搜索. 特点: 使用 xz, bzip2, ...

  7. 使用NPOI将数据导出为word格式里的table

    开发环境:VS2013+MySQL5.5+EF6+NPOI2.0.6 格式:WinForm+CodeFirst PS:vs2013的CodeFirst很方便了啊 CodeFirst方式就不再赘述了. ...

  8. objective-c（内存管理）

    本文主要记录objective-c 内存管理的知识点: 1.objective-c的对象都是分配内存在堆上,与C的mallock和C++的new类似,只有int等系统变量分配内存在栈上: 2.obje ...

  9. static关键字作用总结

    之前讲到final关键字的作用是每次面试的时候我必问求职者的两个问题之一,另外一个问题就是文本会写到的static.final和static一样,都是一个小问题可以看到一个人的基础是否扎实以及平时是否 ...

  10. Java提高篇（二八）------TreeSet

    与HashSet是基于HashMap实现一样,TreeSet同样是基于TreeMap实现的.在<Java提高篇(二七)-----TreeMap>中LZ详细讲解了TreeMap实现机制,如果 ...