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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
什么是SOLID
Mar 24 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
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
JS简单实现表格排序功能示例
2016/12/20 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python模拟实现分发扑克牌
2020/04/22 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
介绍Java的内部类
2012/10/27 面试题
统计岗位职责
2014/02/21 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
HDFS免重启挂载新磁盘
2022/04/06 Servers