我们默认都统一是采用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. 敏捷开发方法-Scrum

    为了不落后他人,于是我也开始学习Scrum,今天主要是对我最近阅读的相关资料,根据自己的理解,用自己的话来讲述Scrum中的各个环节,主要目的有两个,一个是进行知识的总结,另外一个是觉得网上很多学习资 ...

  2. [XAF] 多级联列表显示

    XAF给的例子已经实现,详细可查看例子中的代码. 工作车间--工作中心--机器

  3. 今天自己解决了两个问题（IE10 type slow ChromeDriver erro）

    都是通过google解决的,其实本应该很快解决,可是因自己粗心,大写小错了,加上java基础不过关, "webdriver.chrome.driver"中的webdriver应是全 ...

  4. HTML5 简易转盘

    这里我们使用两个Canvas进行转盘的绘画 canvas1用于绘画背景,Canvas2用于指针的转动: 把Canvas2背景设为透明并使用相对布局定位: #myCanvas2{ position: a ...

  5. Focus, w/o disturbance

    Focus = Aim + Execution + Persistence Disturbance = Disappointment + Anxiety + Failure

  6. await之后的线程问题

    之前看了园子里的一篇文章「async & await的前世今生」,收益颇多.而其中有句话被博主特意用红色标注,所以留意多看了几眼,「await 之后不会开启新的线程(await 从来不会开启新 ...

  7. 我的ORM之八-- 事件

    我的ORM索引 dbo.Event 需要新建一个类,继承:IDboEvent,并设置给:dbo.Event,如: dbo.Event = MyOqlEvent.GetInstance(); 在 IDb ...

  8. Linux4：useradd、userdel、passwd、groupadd、chgrp、chown、df、du、sort、wget

    useradd 添加新的用户账号,只有root账户可以操作 -d 目录:指定用户主目录(默认在home下),若此目录不存在可同时使用-m创建主目录 -g 用户组:指定用户所属的用户组 -G 用户组:指 ...

  9. 【原创】GC/垃圾回收简介

    GC简介 1 GC机制 1.1 对象 从计算机的角度,装有数据的内存空间 1.2 作用 将内存垃圾的释放自动化 1.3 本质 将已经引用不到的对象视为死亡,将死亡的对象找出来并且作为垃圾进行回收 2 ...

  10. [.net 面向对象编程基础] (8) 基础中的基础——修饰符

    [.net 面向对象编程基础] (8) 基础中的基础——修饰符 在进入C#面向对象核心之前,我们需要先对修饰符有所了解,其实我们在前面说到变量和常量的时候,已经使用了修饰符,并且说明了变量和常量的修改 ...