标签：
js的offsetParent属性用法详解:
此属性是javascript中较为常用的属性，对于它的良好掌握也是非常有必要的，下面就通过代码实例介绍一下它的用法，希望能够给需要的朋友带来一定的帮助。
一.基本介绍:
此属性可以返回距离指定元素最近的采用定位（position属性值为fixed、relative或者absolute）父级元素，如果父级元素中没有采用定位的元素，则返回body对象的引用。
语法结构:
obj.offsetParent
二.代码实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #main{ width:300px; height:300px; position:relative; background:red; } #box{ width:200px; height:200px; background:blue; } #inner{ width:50px; height:50px; background:green; text-align:center; line-height:50px; } </style> <script type="text/javascript"> window.onload=function(){ var inner=document.getElementById("inner"); inner.innerHTML=inner.offsetParent.id; } </script> </head> <body> <div id="main"> <div id="box"> <div id="inner"></div> </div> </div> </body> </html>
以上代码可以将inner元素的第一个定位的父级元素的id属性值写入自身。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> #main{ width:300px; height:300px; background:red; } #box{ width:200px; height:200px; background:blue; } #inner{ width:50px; height:50px; background:green; text-align:center; line-height:50px; } </style> <script type="text/javascript"> window.onload=function(){ var inner=document.getElementById("inner"); inner.innerHTML=inner.offsetParent.id; } </script> </head> <body id="thebody"> <div id="main"> <div id="box"> <div id="inner"></div> </div> </div> </body> </html>
在以上代码中，因为inner元素的父级元素中没有采用定位的元素，所以offsetParent属性将会返回body对象的引用，所以会将body对象的id属性值写入inner元素。
特别说明:
1.在IE7浏览器中，offsetParent将会返回第一级父元素对象的引用。
2.如果定位的父级元素的display属性值为none，则此属性返回值为null。
原文地址是:js的offsetParent属性用法详解
标签：
原文地址：http://www.cnblogs.com/nulifendou/p/4842934.html
