offset、scroll、client三大家族

offset

offsetHeight、offsetWidth

一套方便的获取元素尺寸的办法，可以检测盒子的宽高

包括宽高本身，padding，border。不包括margin

offsetHeight = height+padding+border;(不加margin)

offsetWidth = width+padding+border;(不加margin)

<div class="box"></div>

.box {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 10px solid #000;
    margin: 100px;
    background-color: pink;
}

var div = document.getElementsByTagName("div")[0];
console.log(div.offsetHeight);
console.log(typeof div.offsetHeight); 

    

offsetLeft、offsetTop

返回距离上级盒子（带有定位）左边的位置，如果父级都没有定位则以body为准，offsetLeft从父亲的padding开始算到子元素的border为止，父亲的border不算

offsetLeft = 父元素的padding-left+子元素的margin-left（不设置子元素绝对定位的情况下）

offsetLeft = 子元素的left值+子元素的margin-left（设置子元素绝对定位的情况下）

offsetTop = 父元素的padding-top+子元素的margin-top（不设置子元素绝对定位的情况下）

offsetTop = 子元素的top值+子元素的margin-top（设置子元素绝对定位的情况下）

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

.box1 {
    width: 300px;
    height: 300px;
    padding: 20px;
    margin: 10px;
    position: relative;
    border: 10px solid #000;
    background-color: pink;
}
.box2 {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 40px;
    border: 10px solid #000;
    background-color: red;
    position: absolute;
    left: 10px;
    top: 10px;
}

var box2 = document.getElementsByClassName("box2")[0];
console.log(box2.offsetLeft);

      

当把子元素的绝对定位去掉后

     

offsetParent

1、返回该对象的父级（带有定位）         

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

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

<div class="box1" style="position: absolute;">
    <div class="box2" style="position: fixed;">
        <div class="box3"></div>
    </div>
</div>

var box3 = document.getElementsByClassName("box3")[0];
console.log(box3.offsetParent);

offsetLeft和style.left的区别

• 最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。

style.left在父系盒子中都没有定位的情况下，会以body为准。

• style.left只能获取行内式，如果没有返回“”；
• offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

div.offsetLeft = 100; div.style.left = "100px";

• offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）

style.left和style.top可以赋值；offsetLeft和offsetTop只能获取值

• offsetTop和offsetLeft存在取值问题，style.left没有

div.offsetLeft = Math.round(div.style.left);

<div style="position: absolute;left: 396.3px"></div>

var div = document.getElementsByTagName("div")[0];
console.log(div.style.left);
console.log(div.offsetLeft);

scroll

scrollWidth、scrollHeight

scrollWidth和scrollHeight不包括border和margin

高度有一个特点：如果文字超出了盒子，高度为超出盒子的内容的高。不超出是盒子本身高度

scrollWidth = width + padding;（不包括 border和margin）

scrollHeight = contentHegiht>height ? contentHegiht : height;

IE8以下，不包括IE8，为盒子本身内容的多少。

<div class="box">
    人生自古谁无死，留取丹心照汉青。
    人生自古谁无死，留取丹心照汉青。
    人生自古谁无死，留取丹心照汉青。
    人生自古谁无死，留取丹心照汉青。
    人生自古谁无死，留取丹心照汉青。
    人生自古谁无死，留取丹心照汉青。
</div>

div {
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 10px solid #000;
}

var div = document.getElementsByTagName("div")[0];
console.log(div.scrollWidth);
console.log(div.scrollHeight);

scrollLeft、scrollTop

document.body.scrollTop：网页被卷去的头部

document.body.scrollLeft：网页被卷去的左部

但是scrollTop存在兼容性问题：

document.title = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

body {
    height: 5000px;
    width: 5000px;
}

window.onscroll = function () {
    console.log(document.body.scrollTop);
    console.log(document.body.scrollLeft);
}

client

1、clientWidth：获取网页可视区域宽度（两种用法）      

clientHeight    获取网页可视区域高度（两种用法）      

调用者不同，意义不同：         

盒子调用：指盒子本身。         

body/html调用：可视区域大小。    

2、clientX：鼠标距离可视区域左侧距离（event调用）      

clientY：鼠标距离可视区域上侧距离（event调用）

3.  clientTop：盒子的上border      

clientLeft ：盒子的左border

<div class="box"></div>

.box {
    width: 100px;
    height: 100px;
    background-color: pink;
    padding: 100px;
    margin: 100px;
    border: 234px solid #000;
}

var box = document.getElementsByTagName("div")[0];
var bd=document.body;
console.info(bd.clientWidth);
console.info(bd.clientHeight);
//不包括margin和border
//padding+width
console.log(box.clientWidth);
//clientTop获取的是上border
console.log(box.clientTop);
console.log(box.clientLeft);

offset、scroll、client三大家族图示