1.当某个元素及其父元素都未进行CSS定位时,则这个元素的offsetParent属性的取值为根元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为Body元素。(其实无论是标准兼容模式还是怪异模式,根元素都为Body元素)
--------------------------example----返回body-----------------------------
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
<body οnlοad="offset_init()">
<div id="parent">
<p id="sonObj">测试OffsetParent属性</p>
</div>
</body>
-----------------------------------------------------------------------------
2.当某个元素的父元素进行了CSS定位时(relative定位或者absolute定位),则这个元素的offsetParent属性的取值为其父元素。更确切地说,这个元素的各种偏移量计算(offsetTop、offsetLeft等)的参照物为其父元素。
--------------------------example------返回div---------------------------
<style type="text/css">
#parent{
position:relative;<!-- position:absolute;-->
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
<body οnlοad="offset_init()">
<div id="parent">div测试代码
<p id="sonObj">
测试OffsetParent属性
</p>
</div>
</body>
------------------------------------------------------------------------------
3.当某个元素及其父元素都未进行CSS定位时(absolute或者relative),则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近,并且已进行了CSS定位的元素。
----------------------------example----------返回h1----------------------
<style type="text/css">
#Grandfather{
position:relative;
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
<body οnlοad="offset_init()">
<h1 id="Grandfather"><div id="parent"><p id="sonObj">测试OffsetParent属性</p></div></h1>
</body>
-----------------------------------------------------------------------------
4.当只有某个元素进行了CSS定位,其父元素及其DOM结构层次上都未进行CSS定位时,则这个元素的offsetParent属性的取值为HTMLBODYElement。更确切地说,这个元素的各种偏移量计算(offsetTop、 offsetLeft等)的参照物为Body元素。
--------------------------example-------返回body-------------------------------
<style type="text/css">
#sonObj{
position:relative;
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body οnlοad="offset_init()">
<h1 id="Grandfather">
<div id="parent">div测试代码
<p id="sonObj">
测试OffsetParent属性
</p>
</div>
</h1>