offsetParent 算法分析


Posted in Javascript onApril 05, 2010

当调用元素 A 的 offsetParent 属性时,必须按以下算法返回元素。

以下任一条件为真时,返回 null,并停止本算法。
A 是根元素。
A 是 HTML 的 body 元素。
元素 A 的 position 属性计算值是 fixed。注 1
如果 A 是 HTML 元素 area,并且在其上级元素链中有 HTML 元素 map,返回上级元素链中距 A 最近的 HTML 元素 map,并停止本算法。注 2
如果以下任一条件为真时,返回距 A 最近的符合下述条件的上级元素,并停止本算法。
上级元素的 position 属性计算值不是 static。注 3
上级元素是 HTML 的 body 元素。注 4
A 的 position 属性计算值是 static,上级元素是 td、th 或 table。
返回 null。
前面已经提到,以上是工作草案的内容,所以与现行的浏览器不一定一致,注释如下:

注 1 Firefox 不适用;IE 6 不适用;DOCTYPE 使 IE 7 不支持 fixed 时不适用(以下简称 IE 6 模式)。
注 2 Firefox 不适用。
注 3 上级元素的 position 属性计算值是 fixed,并且 IE 6 或者 IE 6 模式不适用。
注 4 IE 7 模式中,如果元素的 position 属性计算值是 absolute 或 relative,返回元素 HTML,而不是 BODY。
总结

由此看出,获得 offsetParent 在各个浏览器中,各个浏览器的各个版本中,同一版本的不同模式中,都有不同的算法,实在有些麻烦。所以还是建议将其理解为通过 offsetParent 循环和 offsetLeft、offsetTop 可以获得控件在浏览器中的绝对位置即可。

但庆幸的是有一种常见布局在各种浏览器中 offsetParent 是一样的,那就是:外层元素 div 的 position 计算值是 relative、absolute 时,内层元素 div 的 offsetParent 总是外层元素 div。

Javascript 相关文章推荐
javascript 写类方式之五
Jul 05 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
Apr 28 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 #Javascript
jQuery 技巧小结
Apr 02 #Javascript
jquery 页面全选框实践代码
Apr 02 #Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 #Javascript
jquery select下拉框操作的一些说明
Apr 02 #Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 #Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 #Javascript
You might like
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
Vue中的$set的使用实例代码
2018/10/08 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python变量类型知识点总结
2019/02/18 Python
python实现中文文本分句的例子
2019/07/15 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
Python&&GDAL实现NDVI的计算方式
2020/01/09 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
python实现文字版扫雷
2020/04/24 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
质量工程师岗位职责
2013/11/16 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
青年文明号汇报材料
2014/12/23 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
mysql优化
2021/04/06 MySQL