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>
复制代码

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 获得