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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
JavaScript 原型与原型链详情
Nov 02 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
递归列出所有文件和目录
2006/10/09 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
PHP常用数组函数介绍
2014/07/28 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
分享php分页的功能模块
2015/06/16 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
Vue组件通信的四种方式汇总
2018/02/08 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python3处理HTTP请求的实例
2018/05/10 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
技术经理的自我评价范文
2013/12/03 职场文书
社区党员干部承诺书
2015/05/04 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
redis缓存存储Session原理机制
2021/11/20 Redis
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL