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 相关文章推荐
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
Ajax常用封装库——Axios的使用
May 08 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
php字符串函数学习之strstr()
2015/03/27 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
关于vue里页面的缓存详解
2019/11/04 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
python如何求解两数的最大公约数
2018/09/27 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
什么是类的返射机制
2016/02/06 面试题
会展中心部门工作职责
2013/11/27 职场文书
毕业生个人求职信范例分享
2013/12/17 职场文书
家长对孩子评语
2014/01/30 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
个人求职信范文
2014/05/24 职场文书
超市客服工作职责
2014/06/11 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫