1、元素偏移量 offset 系列

1.1 offset 概述

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）

注意：返回的数值都不带单位

offset 系列采用属性：

`offset` 系列属性	作用
`element.offsetParent`	返回作为该元素带有定位的父级元素如果父级都没有定位则返回`body`
`element.offsetTop`	返回元素相对带有定位父元素上方的偏移
`element.offsetLeft`	返回元素相对带有定位父元素左边框的偏移
`element.offsetWidth`	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
`element.offsetHeight`	返回自身包括padding、边框、内容区的高度，返回数值不带单位

<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 区别

`offset`	`style`
`offset` 可以得到任意样式表中的样式值	`style` 只能得到行内样式表中的样式值
`offset` 系列获得的数值时没有单位的	`style.width` 获得的是带有单位的字符串
`offsetWidth` 包含 `padding + boder + width`	`style.width` 获得不包含 `padding` 和 `border` 的值
`offsetWidth` 等属性是只读属性，只能获取不能赋值	`style.width` 是可读写属性，可以获取也可以赋值
所以，我们想要获取元素大小位置，用 `offset` 更合适	所以，我们想要给元素更改值，则需要用 `style` 改变

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

分三步走：

添加鼠标点击事件：获取鼠标在盒子内部的位置
添加鼠标移动事件：实时获取盒子的位置并修改盒子的位置
添加鼠标弹起事件：清除鼠标移动事件

<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 系列的相关属性可以得到该元素的大小、元素的大小等

client 系列属性	作用
`element.clientTop`	返回元素上边框的大小
`elemrnt.clientLeft`	返回元素左边框的大小
`element.clientWidth`	返回自身包括 `padding`、内容区的宽度、不含边框，返回数值不带单位
`element.clientHeight`	返回自身包括 `padding`、内容区的高度、不含边框，返回数值不带单位

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

3、元素滚动 scroll 系列

3.1 元素`scroll`系列属性

scroll 翻译过来就是滚动的，我们使用相关属性可以动态得到该元素的大小、滚动距离等

scroll系列属性	作用
`element.scrollTop`	返回被卷去的上侧距离，返回数值不带单位
`element.scrollLeft`	返回被卷去的左侧距离，返回的数值不带单位
`element.scrollWidth`	返回自身实际的宽度，不含边框，返回数值不带单位
`element.scrollHeight`	返回自身实际的高度（所有内容，包括还没有先没有显示出来的），不含边框，返回数值不带单位

栗子：

<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头部被卷去部分的大小
})

总结：

三大系列大小对比	作用
`element.offsetWidth`	返回自身包括 `padding`、边框、内容区的宽度，返回数值不带单位
`element.clientWidth`	返回自身包括 `padding`、内容区的宽度，不包括边框，返回数值不带单位
`element.scrollWidth`	返回实际的宽度、包括`padding`，不包括边框，返回数值不带单位

主要用法：

offset 系列经常用于获取元素位置： offsetTop 、offsetLeft
client 系列经常用于获取元素的大小：clientWidth、clientHeight
scroll系列经常用于获取滚动距离：scrollTop 、scrollLeft
注意页面滚动的距离通过 window.pageXOffset 获得

BOM之元素三大系列