我们默认都统一是采用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. BNUOJ 51279[组队活动 Large](cdq分治+FFT)

    传送门 大意:ACM校队一共有n名队员,从1到n标号,现在n名队员要组成若干支队伍,每支队伍至多有m名队员,求一共有多少种不同的组队方案.两个组队方案被视为不同的,当且仅当存在至少一名队员在两种方案中 ...

  2. 项目文件""已被重命名或已不在解决方案中

    如题,这个错误在vs2010里,开始编译的时候出现了,我的解决办法就是把所有的project都移除,然后再添加进来,就不弹这个错误了.

  3. c#实现房贷计算的方法源码

    public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/j ...

  4. testng参数化及用例排序

    http://blog.sina.com.cn/s/blog_6966650401012ra0.html 一.一个简单的测试谷歌搜索 import org.testng.annotations.Tes ...

  5. 为什么没调用 didRegisterForRemoteNotificationsWithDeviceToken 和 didFailToRegisterForRemoteNotificationsWithError

    一步一步按照网上 push notification 教程走下来,发现didRegisterForRemoteNotificationsWithDeviceToken 和 didFailToRegis ...

  6. seajs 源码阅读笔记

    代码概览 src目录文件列表如下: 代码以模块化的方式来组织,构建的时候会合并为一个js文件(sea.js 或 sea-debug.js),其中,intro.js和 outro.js 分别是这个js文 ...

  7. windows系统下的第一个console程序

    窗口+r 键,输入cmd,打开一个命令行窗口 切换到你的目标目录 输入 dotnet new dotnet会自动帮你创建3个文件. NuGet.Config文件主要定义了NuGet获取nupkg包时的 ...

  8. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  9. 优雅的使用Python之软件管理

    上篇<优雅的使用python之环境管理>http://dwz.cn/wTsOr,如何管理python环境,有了一个干净的python环境之后,就不可避免的安装python软件包(pytho ...

  10. [安卓] 15、用NFC解锁手机并自动打开应用

    最近接到一个项目:将手机放到一个带有NFC卡的底座上手机会自动解锁,然后打开相应的应用 本人用:杭州公交通用卡做为NFC卡+Coolpad手机进行试验 效果如下: 1.手机本身带有图案锁,输对图案才能 ...