1、元素偏移量 offset 系列

1.1 offset 概述

offset 翻译过去就是偏移量，咱们应用 offset 系列相干属性能够动静失去该元素的地位（偏移）、大小等。

• 取得元素间隔带有定位父元素的地位
• 取得元素本身的大小（宽度高度）

留神：返回的数值都不带单位

offset 系列采纳属性：

<div class="father">
    <div class="son"></div>
</div>

CSS 款式：

.father {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;
}

.son {
    width: 100px;
    height: 100px;
    background-color: skyblue;
    padding: 10px;
    border: 2px solid red;
}

let father = document.querySelector('.father');
let son = document.querySelector('.son');

// 元素的大小
console.log(son.offsetWidth);  // 124
console.log(son.offsetHeight);  // 124

console.log(son.offsetParent);  // 返回其父元素
// 元素的偏移量
console.log(son.offsetTop);  // 0
console.log(son.offsetLeft);  // 0

1.2 offset 与 style 区别

小案例：鼠标拖拽盒子在页面中挪动

分三步走：

1. 增加鼠标点击事件：获取鼠标在盒子外部的地位
2. 增加鼠标挪动事件：实时获取盒子的地位并批改盒子的地位
3. 增加鼠标弹起事件：革除鼠标挪动事件

<div class="box">

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>

var box = document.querySelector('.box');
// 鼠标一挪动就会触发事件
box.addEventListener('mousedown', function(e) {
    // 获取鼠标点击时在盒子内的地位
    let x = e.pageX - this.offsetLeft;
    let y = e.pageY - this.offsetTop;
    // 增加点击事件
    document.addEventListener('mousemove', move)

    function move(e) {
        // 实时批改盒子的地位
        box.style.left = e.pageX - x + 'px'
        box.style.top = e.pageY - y + 'px'
    }
    // 鼠标弹起时革除鼠标挪动事件
    document.addEventListener('mouseup', function() {document.removeEventListener('mousemove', move)
    })
})

2、元素可视区 client 系列

client 翻译过去就是客户端，通过 client 系列的相干属性能够失去该元素的大小、元素的大小等

clientWidth 和 offsetWidth 最大的区别是：clientWidth 是不包含边框的，而 offsetWidth 是包含边框的

3、元素滚动 scroll 系列

3.1 元素 scroll 系列属性

scroll 翻译过去就是滚动的，咱们应用相干属性能够动静失去该元素的 大小、滚动间隔等

栗子：

<div class="box">
    如果我的刚强任性 会不小心挫伤了你 你能不能温顺揭示 我尽管心太急，更胆怯错过你 爱真的须要勇气，来面对风言风语 只有你一个眼神必定 我的爱就有意义 咱们都须要勇气 去置信会在一起 人潮拥挤我能感觉你 放在我手心里，你的真心
</div>

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: rgb(10, 181, 248);
        overflow: auto;
        color: #fff;
    }
</style>

<script>
    let box = document.querySelector('.box');
    console.log(box.clientHeight); // 200
    console.log(box.scrollHeight); // 351    
</script>

<img src=”https://pic4.zhimg.com/80/v2-0e411ffeef0ab725de7ac7a29286764a_720w.png” alt=”img” style=”zoom:80%;” />

3.2 页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页时，会主动呈现滚动条。当滚动条向下滚动时，页面下面被暗藏掉的高度，咱们承诺称为页面被卷去的头部。滚动条杂滚动时会触发 onscroll 事件

// scroll 为滚动事件
box.addEventListener('scroll', function() {console.log(this.scrollTop);  // 拖动滚动条，打印 div 头部被卷去局部的大小
})

总结：

次要用法：

1. offset 系列常常用于获取元素地位：offsetTop、offsetLeft
2. client 系列常常用于获取元素的大小：clientWidth、clientHeight
3. scroll系列常常用于获取滚动间隔：scrollTop、scrollLeft
4. 留神页面滚动的间隔通过 window.pageXOffset 取得