web前端
数据库
编程语言
搜索技术
关于本站
登录
登 录
下次自动登录
学步园
返回顶部
查看留言
转到底部
现在的位置:
首页
> 综合 > 正文
RSS
[JavaScript][转]offsetParent和parentElement的区别
2012年01月21日
⁄ 综合
⁄ 共 2333字 ⁄ 字号
小
中
大
⁄
评论关闭
作者:未知 来源于:网络转载 发布时间:2006-9-30 23:42:32
一直以为offsetParent和parentElement是一回事,最近在做web控件才发现原来的理解是大错特错。
parentElement 在msdn的解释是Retrieves the parent object in the object hierarchy.
而offsetParent在msdn的解释是Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object. 这个解释有些模糊。我们再来看看他的remarks
Most of the time the offsetParent property returns the body object.
大多说offsetParent返回body
Note In Microsoft® Internet Explorer 5, the offsetParent property returns the TABLE object for the TD object; in Microsoft® Internet Explorer 4.0 it returns the TR object. You can use the parentElement property to retrieve the immediate container of the table cell.
对于IE 5.0以上,TD的offsetParent返回Table。
但是msdn并没有讨论在页面td元素中存在绝对/相对定位时offsetParent的值。
以下是我个人总结的规律
在td中的元素会把第一个绝对/相对定位的hierarchy parent当作offsetParent,如果没有找到需要分三种情况讨论
一,如果该元素没有绝对/相对定位,则会把td当作offsetParent
二,如果该元素绝对/相对定位并且table没有绝对/相对定位,则会把body当作offsetParent
三,如果该元素绝对/相对定位并且table绝对/相对定位,则会把table当作offsetParent
看一下示例代码
1.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id IS "parentdiv"
2.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id IS "parentdiv"
3.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.tagName IS "body"
4.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.tagName IS "TD"
5.<BODY >
<TABLE BORDER=1 ALIGN=right style="position:relative">
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
运行结果parentdiv.offsetParent.tagName IS "Table"
sondiv.offsetParent.tagName IS "parentdiv"
返回
【上篇】
深入浅出Wince的存储机制
【下篇】
在校园网中进行无线路由器设置
作者:
gunter
该日志由 gunter 于12年前发表在综合分类下,最后更新于 2012年01月21日.
转载请注明:
[JavaScript][转]offsetParent和parentElement的区别 | 学步园
+复制链接
抱歉!评论已关闭.
书签
招生
白云飘飘网
青岛房产网
最新文章New
网站优化可以收获更好的收益
robots在网页开发中起到了一定的
SEO引擎优化可以更好的方便搜索
Dreamweaver教程很实用,值得学习
很多的photoshop教程值得学习,你
编程语言很重要,特别是对于计算
数据库非常常见,也非常实用!
H5指的是第5代html,不同于传统企
HTML是什么,该怎么制作?
本站推荐
为什么PHP的吉祥物是一头大象
作业的提交和监控(二)
作业的提交和监控(一)
Boost – Function 分析
奇技淫巧 – C/C++ 宏自身
模板的 SFINAE 原则
Octopress 和 Git 的结合
Electric-fence 介绍