offsetParent和parentElement的区别
代码
offsetParent和parentElement的区别 一直以为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. 这个解释有些模糊。我们再来看看他的remarksMost of the time the offsetParent property returns the body object.大多说offsetParent返回bodyNote 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"
浙公网安备 33010602011771号