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 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue.js实现标签页切换效果
Jun 07 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 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
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
Dojo 学习要点
2010/09/03 Javascript
jquery $.ajax相关用法分享
2012/03/16 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
jQuery实现自定义checkbox和radio样式
2015/07/13 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
办理生育手续介绍信
2014/01/14 职场文书
高三生物教学反思
2014/01/25 职场文书
五年级音乐教学反思
2014/02/06 职场文书
医院信息公开实施方案
2014/05/09 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
房地产端午节活动方案
2014/08/24 职场文书
员工试用期自我评价
2014/09/18 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
2014年新教师工作总结
2014/11/08 职场文书
小学运动会通讯稿
2015/07/18 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
基于Python实现将列表数据生成折线图
2022/03/23 Python
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
Go 内联优化让程序员爱不释手
2022/06/21 Golang