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 相关文章推荐
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
node.js中fs.stat与fs.fstat的区别详解
Jun 01 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
JavaScript 中的六种循环方法
Jan 06 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/08/30 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
教你安装python Django(图文)
2013/11/04 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python编程嵌套函数实例代码
2018/02/11 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
对python调用RPC接口的实例详解
2019/01/03 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
物资采购方案
2014/06/12 职场文书
法制宣传口号
2014/06/16 职场文书
就业协议书范本
2014/10/08 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis