首页 > 代码库 > offsetParent详解

offsetParent详解

offsetParent与parentNode一样,都是获取父节点,但是offsetParent却有很大的不同之处:

offsetParent找有定位的父节点,没有定位默认是body,ie7以下定位在当前元素是html

怎么理解上面的话呢,其实这需要与css配合使用,我们先看例子:

 

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#d1{}</style></head><body><div id="d1">    <ul id="u1">        <li class="l1"></li>        <li class=""></li>        <li class="l1"></li>        <li class=""></li>    </ul></div><script>var dom = document.getElementById(u1);alert(dom.offsetParent.tagName);</script></body></html>

 

ie9:

技术分享

ie7:

技术分享

 

我们修改样式:

#d1{position:relative;}

ie9:

技术分享

ie7:

技术分享

 

我们把定位写到u1上面:

#u1{position:relative;}

ie9:

技术分享

ie7:

技术分享

 

offsetParent详解