當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
[JavaScript][转]offsetParent和parentElement的区别
生活随笔
收集整理的這篇文章主要介紹了
[JavaScript][转]offsetParent和parentElement的区别
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
作者：未知 來源于：網(wǎng)絡(luò)轉(zhuǎn)載 發(fā)布時間：2006-9-30 23:42:32
一直以為offsetParent和parentElement是一回事，最近在做web控件才發(fā)現(xiàn)原來的理解是大錯特錯。
?
?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的值。
?
?以下是我個人總結(jié)的規(guī)律
?
?在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>
?
?
?運行結(jié)果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>
?
?運行結(jié)果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>
?
?
?運行結(jié)果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>
?
?
?運行結(jié)果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>
?
?運行結(jié)果parentdiv.offsetParent.tagName IS "Table"
?
???????????????? sondiv.offsetParent.tagName??? IS "parentdiv"
一直以為offsetParent和parentElement是一回事，最近在做web控件才發(fā)現(xiàn)原來的理解是大錯特錯。
?
?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的值。
?
?以下是我個人總結(jié)的規(guī)律
?
?在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>
?
?
?運行結(jié)果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>
?
?運行結(jié)果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>
?
?
?運行結(jié)果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>
?
?
?運行結(jié)果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>
?
?運行結(jié)果parentdiv.offsetParent.tagName IS "Table"
?
???????????????? sondiv.offsetParent.tagName??? IS "parentdiv"
轉(zhuǎn)載于:https://www.cnblogs.com/Godblessyou/archive/2007/12/24/1012920.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的[JavaScript][转]offsetParent和parentElement的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS开发——高级技术本地化与国际化详解
- 下一篇： 如何优化JavaScript脚本的性能