當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

[JavaScript][转]offsetParent和parentElement的区别

發布時間：2023/12/10 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 [JavaScript][转]offsetParent和parentElement的区别小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

作者：未知　來源于：網絡轉載　發布時間：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"

轉載于:https://www.cnblogs.com/Godblessyou/archive/2007/12/24/1012920.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的[JavaScript][转]offsetParent和parentElement的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： iOS开发——高级技术本地化与国际化详解
下一篇：最新可用NOD32免ID升级服务器