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移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
详细介绍Next.js脚手架完整搭建封装
Apr 26 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
又一个图片自动缩小的JS代码
2007/03/10 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
node 解析图片二维码的内容代码实例
2019/09/11 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
简析Python的闭包和装饰器
2016/02/26 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
python多线程扫描端口(线程池)
2019/09/04 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
Windows和Linux动态库应用异同
2016/04/17 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
学生励志演讲稿
2014/01/06 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
店面出租协议书范本
2014/11/28 职场文书
2015年清明节活动总结
2015/02/09 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
基于Python实现nc批量转tif格式
2022/08/14 Python