JS之DOM2

1 offsetParent 获取离元素最近的有定位的父级

  特点：一层层往上找，知道找到最近的有定位的父级后返回这个父级

         如果父级都没有定位，返回body(IE8+)

 注意： 1 遵循一个原则，父级一定要给一个定位

             2 body 是没有 offsetParent

<div id="box4">box4
    <div id="box3">box3
        <div id="box2">box2
            <div id="box1">box1</div>
        </div>
    </div>
</div>

<script type="text/javascript">
var box1=document.getElementById("box1");
var box3=document.getElementById("box3");

console.log(box1.offsetParent);    // box2
box1.offsetParent.style.borderColor="green";
console.log(document.body.offsetParent); // null

 

2 offsetLeft 找到元素最左边离最近的有定位的父级之间的距离，不带单位，不带边框

3 offsetTop 找到元素最上边离最近的有定位的父级之间的距离，不带单位，不带边框

注意: 1 如果没有定位父级，那默认是到html的距离

          2 遵循原则 给父级定位，把默认样式清掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta >
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    div{
        width:100px;
        height: 100px;
        border:1px solid #f00;
        margin:70px 0 0 70px;
    }
    #box2{
        position: absolute;
    }
    
    </style>
</head>
<body>
    
<div id="box4">box4
    <div id="box3">box3
        <div id="box2">box2
            <div id="box1">box1</div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
var box1=document.getElementById("box1");
var box3=document.getElementById("box3");

console.log(box1.offsetParent);    // box2
box1.offsetParent.style.borderColor="green";
console.log(document.body.offsetParent); // null


console.log(box3.offsetLeft);//141
console.log(box1.offsetLeft);// 70
</script>

4 offsetWidth=width+border+padding 元素的宽（包括边框和内边距），无单位

5 offsetHeight=height+border+padding 元素的高（包括边框和内边距）无单位

注意：如果存在着垂直滚动条，offsetWidth也包括垂直滚动条的距离，如果存在着水平滚动条，offsetHeight也包括水平滚动条

posted @ 2017-12-06 14:38  走在程序的路上  阅读(390)  评论(0)  编辑  收藏  举报