offset、client和scroll的区别

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

网页开发中经常需要获取元素或者文档相关位置以及数值属性，下面会用文字图解的方式方便快速了解这方面的内容。

一、offset

offset是偏移、位移、补偿的意思，使用offset相关属性可以获取元素的实际宽高、元素到父元素（父元素有定位属性）之间的距离。具体如下图所示：

1. offsetParent：是一个只读属性，用于获取最近一个拥有定位父元素；如果没有父级元素，那么返回的是body。

var son = document.getElementById('s');
console.log(son.offsetParent);

2. offsetTop：元素外边距到父元素的边框内侧，其实就是元素marginTop+父元素paddingTop，不包含边框；如果没有定位父元素则获取到body的距离。

console.log(son.offsetTop);

以上面代码为例，图中的父元素的padding-top为100px;，子元素margin-top为100px，那么就是200.需要注意的是，返回结果是不带单位的，使用时需要看情况添加单位。

3. offsetLeft：与offsetTop一样，就是元素marginLeft+父元素paddingLeft，不包含边框值。

console.log(son.offsetLeft);

数值一样，结果同样是200。

4. offsetWidth：返回的自身元素包含内边距padding、边框border、内容区的宽度width，同样的返回值不带单位。

#s{
    width: 200px;
    height: 200px;
    background: red;
    margin-top: 50px;
    margin-left: 50px;
    border: 10px solid black;
    padding: 20px;
}

var son = document.getElementById('s');
console.log(son.offsetWidth);

计算结果：200 + 10 * 2 + 20 * 2 = 260

5. offsetHeight：与offsetWidth一样，返回的自身元素包含内边距padding、边框border、内容区的宽度height，返回值不带单位。

console.log(son.offsetHeight);

数值一致，结果一致

二、client

client是客户端的意思，使用client相关属性可以获取元素的边框、宽高等数值信息。

1. clientTop：返回元素上边框大小；
2. clientLeft：返回元素左边框大小；
3. clientWidth：返回元素包含内边距padding和内容区的宽度width，返回值不包含单位；
4. clientHeight：返回元素包含内边距padding和内容区的宽度height，返回值不包含单位；

以上面的代码为例：

console.log(son.clientTop);
console.log(son.clientLeft);
console.log(son.clientWidth);
console.log(son.clientHeight);

三、scroll是一些关于元素

scroll是关于元素滚动时的属性，比如宽高等。如图所示：

1. scrollTop：返回元素因滚动隐藏的距离上侧的距离；
2. scrollLeft：返回元素因滚动隐藏的距离左侧的距离；
3. scrollWidth：返回自身元素实际宽度，不包含border，不带单位；
4. scrollHeight：返回自身元素实际高度，不包含border，不带单位；