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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
Javascript 面向对象 对象(Object)
May 13 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
javascrpt密码强度校验函数详解
Mar 18 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
在项目中寻找代码的坏命名
2012/07/14 PHP
php实现的mongodb操作类
2015/05/28 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python字典的常用操作方法小结
2016/05/16 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
python远程连接MySQL数据库
2019/04/19 Python
win10安装python3.6的常见问题
2020/07/01 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
车间组长岗位职责
2013/12/20 职场文书
学生安全教育材料
2014/02/14 职场文书
活动总结书
2014/05/08 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang
python小型的音频操作库mp3Play
2022/04/24 Python
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers