一、offset团队的成员

说起，offset，单词本身是偏移，补偿和位移的意思。
JS中有一些offset方法/属性属性用于获取元素尺寸。

打开像泰坦尼克一样的经典的北少林失传经典——W3c Element元素大全,我们发现，关于offset，大概有如下一些属性：

属性	解释
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的宽度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetTop	返回元素的垂直偏移位置。
element.offsetParent	返回元素的偏移容器。

嗯，大道至简，言简意赅，简单到都不知道怎么区分了。
不过，还是为芸芸众生指明了大的方向。那就是，宽高，左上和父类。

理解offset系列的时候，我们经常会和style样式的类似属性对对比。

注意：
==offset系列属性都是只读的。==
==style.top、style.height之类的style系列的属性是可读可写的。==

image.png

二、offsetHeight和offsetWidth

这对大兄弟，就是经典的宽和高了。
他们非常类似，我们以 offsetWidth 例子展开描述。

说起宽度，遥想过去，我们自然会想起css里面的style.width，既然有这个鬼东西存在了，那么还要offsetWidth来干嘛，字母比较长显得比较牛逼吗？

显然不是，因为style.width有一定的弊端。

css的style.width的弊端

style.width只有在行内式的时候才可以获取到宽度。

offsetWidth如何计算宽度

计算方式

offsetWidth = width + border + padding

也就是，margin我不要，其他我都算。

栗子，style.width和offsetWidth

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            background-color: #6C6C6C;
            margin:0;
            padding:0
        }
        #box1{
            width: 10px;
            height: 10px;
            padding: 20px;
            margin: 30px;
            border: 3px solid red;
        }
    </style>

</head>
<body>
<div id="box1"></div>
<div id="box2" style="width: 30px; height: 30px; border: 1px solid blue"></div>
</body>
<script>
    var box1 = document.getElementById("box1");
    console.log("box1 style.width: "+box1.style.width); // 输出空  style.width 只能得到行内式
    console.log("box1.offsetWidth: "+box1.offsetWidth); // 输出 56
    console.log("box1.offsetHeight: "+box1.offsetHeight); // 输出 56
    console.log("===");
    console.log("box2 style.width: "+box2.style.width); // 输出 30px
    console.log("box1.offsetWidth: "+box2.offsetWidth); // 输出 32
    console.log("box1.offsetHeight: "+box2.offsetHeight);  // 32
</script>
</html>

.
.
效果：

image.png

.
.

offsetWidth小结图

image.png

.
.

三、offsetLeft和offsetTop

我们的知道，在计算机的世界里，不上讲究上下左右，而是上左，下右之类的。
有了宽高，加上top和left，就可以框定一个确定一个东西的大小和位置。

说起offset的left和top，我们接着和style较劲，比如style.left。

style.left的弊端

只有在行内式定位的元素才有style.left。
（只有行内样式的css的才能取到style.left的值）

offsetLeft的计算

offsetLeft：找到离元素最近的已经定位的父元素或祖先元素定位；如果没有，就根据根节点body定位，然后获取其left值。

返回距离父元素（最近的带有定位）左边的位置（可以是间接父级）
如果父元素都没有定位则以body 为准
==offsetLeft 从父元素的padding 开始算，（不是父元素的border）==

offsetLeft和offsetTop类似，我们以offsetLeft为例子展开描述，和style.left作对比。

例子，offsetLeft 和 style.left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0
        }
        .grand{
            width: 300px;
            height: 300px;
            border: 7px solid gray;
            padding: 18px;
            background-color: red;
            position: relative;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 50px;
        }
        #son{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 50px;
        }
        /*这样依然取不到style.left的值*/
        /*#son2{*/
            /*width: 100px;*/
            /*height: 100px;*/
            /*background-color: orange;*/
            /*margin: 50px;*/
            /*position: absolute;*/
            /*top: 6px;*/
            /*left: 6px;*/
        /*}*/

    </style>

</head>

<body>
<div class="grand">
    <div class="father">
        <div id="son"></div>
        <div id="son2" style="width: 100px; height: 100px; background-color: orange; margin: 50px;
            position: absolute; top: 6px; left: 6px">

        </div>
    </div>
</div>
</body>

<script>
    var son = document.getElementById("son");
    var son2 = document.getElementById("son2");
    console.log("son.offsetLeft: "+son.offsetLeft); // son.offsetLeft: 118
    console.log("son.style.left: "+son.style.left); // son.offsetLeft: 118

    console.log("son2.offsetLeft: "+son2.offsetLeft); // son2.offsetLeft: 56
    console.log("son2.style.left: "+son2.style.left); // son2.style.left: 6px   注意：style.left输出值是带px（如果有值）

</script>
</html>

可以看出：
确实是需要内行样式时，style.left才能取出时。
style.left取出的是还有px后缀。
style.left取出的值，是跟自己作比较，而不是跟父元素。

son.offsetLeft显然是跟“父元素”作比较的。

offsetLeft 和 offsetTop 小结图

image-2.png

.
.

四、offsetParent 获取父元素

特点

1、元素自身有fixed定位，offsetParent的结果为null
- firefox并没有考虑固定定位的问题，返回<body>，其他浏览器都返回null
- 当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，
  此时没有定位父级，offsetParent的结果为null
2、如果找到存在定位的父元素，offsetParent返回该父元素
3、如果没有任何一个父元素（不断向上，找到为止）存在定位，offsetParent为body
4、<body>元素的parentNode是null

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*如果自身为fixed，那么offsetParent为null*/
        /*.test{*/
            /*position: fixed;*/
        /*}*/

        .div0{
            position:absolute;
        }


        .div1{
            position: relative;
        }

    </style>

</head>

<body>
<div id="div0" class="div0">
    <div id="div1" class="div1">
        <div id="test" class="test"></div>
    </div>
</div>
</body>

<script>
    var test = document.getElementById("test");
    console.log(test.offsetParent);
    console.log(test.offsetParent.id);
    console.log(test.offsetParent.tagName);
</script>
</html>

运行结果：