offsetParent与parentNode的区别

xianstudy JavaScript 2015-03-13 961 0 定位

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

　　总的来说两条规则：

　　1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

　　2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。

示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>offsetParent与parentNode的区别</title>
<style>
* { margin:0; padding:0; }
#div1 { position:absolute; top:50px; left:50px; width:500px; height:500px; background:#ccc; }
#div2 { width:300px;height:300px; background:yellow; }
#div3 { position:absolute; top:20px; left:20px; width:200px; height:200px; background:green; }
</style>
<script>
window.onload=function (){
    var oDiv=document.getElementById('div3');
    
     //oDiv.parentNode.style.background='blue';
     oDiv.offsetParent.style.background='blue';
};
</script>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <div id="div3"></div>
        </div>
    </div>
</body>
</html>