博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery尺寸算法
阅读量:6403 次
发布时间:2019-06-23

本文共 1049 字,大约阅读时间需要 3 分钟。

我们默认都统一是采用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、

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

outerWidth、outerHeight

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

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

我们具体看看怎么计算的

innerWidth = ele.offsetWidth –ele.borderRightWidth –ele.borderLeftWidthinnerHeight = ele.offseHeight –ele.borderTopHeight –ele.borderBottomHeight

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

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

outerWidth(true) = ele.offsetWidth + ele.marginLeft + ele.marginRightouterHeigth(true) = ele.offsetHeigth + ele.marginTop + ele.marginBottom

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

本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/4155615.html,如需转载请自行联系原作者

你可能感兴趣的文章
12 Go语言map底层浅析
查看>>
vue-resumer 项目中 element-ui 遇到的 textarea autosize 问题
查看>>
以主干开发作为持续交付的基础
查看>>
PHP扩展库PEAR被攻击,近半年下载者或被影响
查看>>
传统运维团队转型应该注意哪些问题?
查看>>
JavaScript函数(二)
查看>>
Airbnb改进部署管道安全性,规范部署顺序
查看>>
腾讯最大规模裁撤中层干部,让贤年轻人
查看>>
当我们谈性能的时候,我们实际上在谈什么?
查看>>
蔡超:入门 Go 语言必须跨越的五个思维误区
查看>>
使用Akka Actor和Java 8构建反应式应用
查看>>
curl常用命令详解
查看>>
saltstack 添加计划任务
查看>>
Puppet module命令参数介绍(六)
查看>>
《UNIX网络编程》中第一个timer_server的例子
查看>>
CISCO 路由器(4)
查看>>
网络服务搭建、配置与管理大全(Linux版)
查看>>
Silverlight 5 Beta新特性[4]文本缩进控制
查看>>
springMVC多数据源使用 跨库跨连接
查看>>
Git服务端和客户端安装笔记
查看>>