手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:offsetparent

offsetParent作用范围

在看代码的时候看到了这个offsetParent也就顺便找了一下资料:

XML/HTML代码
  1. offsetParent从字面上理解,这是在查找元素的父亲.可实际应用中,根据浏览器他会返回不同的结果.在Opera较低版本中返回被引用元素的直接父元素,在IE中使用offsetParent有时会返回body元素,有时会返回被引用元素的父元素.为什么IE会这样.我会在下面的实例演示中解释清楚.而在FireFox中他总是返回body元素.  
  2. 注意:offsetLeft与offsetTop永远是根据offsetParent来返回值,如果offsetParent返回的是父元素,那么他们就返回与父元素的偏移结果,如果offsetParent返回的是body元素,那么他们就返回与body元素的偏移结果.请根据浏览器进行测试.  

然后找了一段代码进行测试:

XML/HTML代码
  1. <html>  
  2. <head>  
  3.     <title>Dom:offsetParent使用</title>  
  4. </head>  
  5. <body>  
  6.     <p>该网页中有4个div 他们的id值分别是a,a_1,b,b_1<br/> a包含了a_1.b包含了b_1<br/> a和b是相互独立的..下面我们分别对a_1和b_1两个子元素使用offsetParent方法.  
  7.         你用IE浏览器测试,你会发现a1的运函数弹出body,而b1的运行函数返回了div,同样的两个子元素.同样的使用方法.为什么返回的结果不一样呢? 原因就是我为b1的父元素b,增加了一个宽度属性以后.他就把offsetParent看做是元素的父元素.如果不为b元素指定任何属性样式,他则返回body  
  8.         而在火狐和谷歌浏览器中两次都会弹出body,不会受此影响.</p>  
  9.     <div id="a">  
  10.         <div id="a_1"></div>  
  11.     </div>  
  12.     <div id="b" style="width:200px;">  
  13.         <div id="b_1"></div>  
  14.     </div>  
  15.     <script type="text/javascript">  
  16.         function a1_offsetParent() { //测试b元素的offsetParent  
  17.             var a_1 = document.getElementById("a_1");  
  18.             alert(a_1.offsetParent.tagName);  
  19.         }  
  20.         a1_offsetParent();//运行a1测试函数  
  21.         function b1_offsetParent() {  
  22.             var b_1 = document.getElementById("b_1");  
  23.             alert(b_1.offsetParent.tagName);  
  24.         }  
  25.         b1_offsetParent();//运行b1测试函数  
  26.     </script>  
  27. </body>  
  28. </html>  

这个时候就象上面的说明所说的,在firefox和webkit核心下两者都返回了“body”,然而:

XML/HTML代码
  1. 网友hcp8706说:  
  2. 在FF中使用offsetParent时不一定总返回body元素,当父元素使用css设置了定位属性时,offsetParent就会返回父元素.   

于是我在div的id="b"的style里加入了position:absolute,然后再测试,果然就返回了DIV。

XML/HTML代码
  1. <div id="b" style="width:200px;position:absolute;">  
  2.     <div id="b_1"></div>  
  3. </div>  
  4. <script type="text/javascript">  
  5.     function b1_offsetParent() {  
  6.         var b_1 = document.getElementById("b_1");  
  7.         alert(b_1.offsetParent.tagName);  
  8.     }  
  9.     b1_offsetParent();//运行b1测试函数  
  10. </script>  


学习完毕,上述的信息来自:http://www.web666.net/dom/offsetParent.html

Tags: offsetparent