JavaScript原生之DOM - Offset系列

通常来讲在offset这个命令上用的还比较少，大多数时候可能在JQuery的使用就可以直接覆盖过去，有更好更简单的办法为何不可呢？ 今天来讲讲offset系列：

1) offsetParent   2)offsetLeft   3)offsetTop

先讲讲这三个吧，举个栗。更有代入感一点，图文并茂更容易理解。

 

首先讲讲 offsetParent 寻找设置position的父级元素。

HTML部分

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

样式部分

<style>
    div{
        width: 100px;
        height: 100px;
        border:  1px solid #f00;
        margin: 70px 0 0 70px;
    }
    #box2{
        position: absolute;
    }
    #box4{
        position: relative;
    }
</style>

效果图如下：

offsetParent  作用（拿来干嘛的？） : 获取元素最近的有定位的父级。

举例：

window.onload=function(){
    var box1=document.getElementById('box1');
    var box2=document.getElementById('box2');
    var box3=document.getElementById('box3');
                
    console.log(box1.offsetParent);    //box2
    box1.offsetParent.style.background='red';
}

这个效果，就代表了我们通过offsetParent找到了 box1的父级元素,box2 ， 并且成功的给它添加了新的样式。

我们继续

console.log(box3.offsetParent);    //box4
box3.offsetParent.style.background='blue';

效果如下

最后我们来试试body的offsetParent是什么呢？

console.log(document.body.offsetParent); //Null

大致总结下作用规则：

当用到offseParent后，它会一层一层往上找，直到找到最近的由定位的父级后就把这个父级返回。
注意：如果父级都没有定位，那返回Body（IE8以及IE8以上，其下可能是HTML或者自身）

语法：元素.offsetParent
注意：1）遵循一个原则，父级一定要给一个定位
2）body是没有offsetParent

 

接下来说说offsetHeight 和 offsetTop

依然先上代码例子，HTML部分

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

样式部分

div{
    width: 100px;
    height: 100px;
    border: 1px solid #f00;
    margin: 70px 0 0 70px;
}
#box2{
    position: absolute;
}

代码已经写好了，那么接下来开始Script部分，试试offsetLeft , offsetTop的效果吧

var box3=document.getElementById('box3');  //我们先获取box3元素
console.log(box3.offsetLeft);   // 70  打印其offsetLeft属性 

offsetLeft 作用 （拿来干嘛的） ：找到元素最左边离最近的由定位的父级之间的距离,距离的值不带单位，并且计算不包括边框值

语法： 元素.offsetLeft

我们来试试offsetTop呢？

console.log(box3.offsetTop);  //91

offsetTop作用： 找到元素最上边离最近的由定位的父级之间的距离，距离的值不带单位，并且同样不计算其边框

语法： 元素.offsetTop

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

遵循一个原则：1）给父级添加定位    2）一上来把默认样式清除掉

给大家一个图例