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 相关文章推荐
如何在Mozilla Gecko 用Javascript加载XSL
Jan 09 Javascript
JS input 数字验证代码
Jul 30 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
Vue数组更新及过滤排序功能
Aug 10 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 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学习 运算符与运算符优先级
2008/06/15 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python工厂函数用法实例分析
2018/05/14 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
Python中内建模块collections如何使用
2020/05/27 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Python实现验证码识别
2020/06/15 Python
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
上班睡觉检讨书
2014/01/09 职场文书
工厂实习感言
2014/01/14 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
员工保密承诺书
2014/05/28 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS