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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
js中事件对象和事件委托的介绍
Jan 21 Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
react项目从新建到部署的实现示例
Feb 19 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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
jQuery前台数据获取实现代码
2011/03/16 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
iframe父页面获取子页面参数的方法
2014/02/21 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
简单了解JavaScript sort方法
2019/11/25 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
20行python代码实现人脸识别
2019/05/05 Python
python之pyqt5通过按钮改变Label的背景颜色方法
2019/06/13 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
基于Python中的yield表达式介绍
2019/11/19 Python
python构造IP报文实例
2020/05/05 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
小天鹅官方商城:LittleSwan
2017/06/16 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
Booking.com亚太地区:Booking.com APAC
2020/02/07 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
聘任书模板
2014/03/29 职场文书
团日活动总结范文
2014/04/25 职场文书
食堂标语大全
2014/06/11 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
房产遗嘱范本
2015/08/06 职场文书
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server
php修改word的实例方法
2021/11/17 PHP