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 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
javascript中xml操作实现代码
Nov 21 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
Angularjs过滤器使用详解
May 25 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
微信小程序实现单选功能
Oct 30 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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 前一天或后一天的日期
2008/06/28 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
2013/09/10 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python数组并集交集补集代码实例
2020/02/18 Python
基于python3生成标签云代码解析
2020/02/18 Python
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
网上卖盒饭创业计划书范文
2014/02/07 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
房屋租赁协议书
2014/04/10 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
新年祝酒词大全
2015/08/11 职场文书
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技