我们默认都统一是采用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. Windows Phone 8.1 新特性 - 控件之FlipView

    本篇为大家介绍 Windows Phone 8.1 中新增的 FlipView 控件,它的中文名字叫做:翻转视图. 虽然听起来有点拗口,但是它的用途大家一定不会陌生.在 Windows Phone 8 ...

  2. To Use FTP Command in Linux

    Yesterday I was asked to upload a file in Linux to the corresponding server. I said "oops" ...

  3. C2第八次解题报告

    看过题解后如果觉得还算有用,请帮忙加点我所在团队博客访问量 http://www.cnblogs.com/newbe/ http://www.cnblogs.com/newbe/p/4069834.h ...

  4. java-多线程新特性

    Java定时器相关Timer和TimerTask类 每个Timer对象相对应的是单个后台线程,用于顺序地执行所有计时器任务TimerTask对象. Timer有两种执行任务的模式,最常用的是sched ...

  5. Zabbix日志监视的汇总报警（更新发送邮件脚本）

    Zabbix的用户一定会碰到这种情况: 日志报警一般设置的是multiple模式,有错误大量写入的时候,每写入一行就会触发一次action,导致出现大量的报警邮件. 特别是ora的报警,经常一出就是上 ...

  6. 【原创】还原Hyper-V 到一个新的虚拟机

    Context: I need to restore VM31 backup (via 'Windows Server Backup' tool) as another new Hyper-V mac ...

  7. React学习笔记---项目构建

    简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的 ...

  8. 轻量级MVC框架：Nancy学习

    一.认识Nancy 今天听讲关于Nancy框架的培训,被Nancy的易用性所吸引.故晚上回来梳理了一下知识. 什么是Nancy呢?如标题所述,Nancy是一个轻量级的独立的框架: Nancy 是一个轻 ...

  9. Web Essentials之Browser Link

    返回Web Essentials功能目录 本篇目录 功能 当Browser Link运行时,会有一个菜单注入到你的网站上,Web Essentials可以使用该菜单上所有可用的一套Browser Li ...

  10. vCPU估算的几个基本概念

    物理CPU数量:实际服务器插槽上的CPU个数: 核:一块CPU上面能处理数据的芯片组的数量: 超线程:在一个实体芯片组中提供两个逻辑线程: 逻辑CPU数量:物理CPU数量*核*超线程(若支持超线程,该 ...