首页 JavaScript正文

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>



版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论