三剑客：offset、client和scroll还傻傻分不清？

---

前言

经常碰到offset、scroll、client这几个关键字，每次都要各种实验，这里总结一下。

---

一、offset

html代码：

<div id="parent">
	<div id="child"></div>
</div>

css代码：

#parent {
	margin-left: 100px;
	width: 500px;
	height: 500px;
	border: 10px solid salmon;
}
#child {
	margin-left: 60px;
	width: 200px;
	height: 200px;
	padding: 10px;
	border: 15px solid green;
	background-color: aquamarine;
}

js代码：

var parent = document.getElementById('parent');
var child = document.getElementById('child');

1.offsetWidth

获取元素的宽度。
offsetWidth：width + 左右padding + 左右border

console.log(child.offsetWidth);

2.offsetHeight

获取元素的高度。
offsetHeight：height + 上下padding + 上下border

console.log(child.offsetHeight);

3.offsetLeft

如果父元素没有定位，获取距离浏览器最左侧的距离。
如果父元素有定位，获取距离父元素最左侧的距离。

console.log(child.offsetLeft);

4.offsetTop

如果父元素没有定位，获取距离浏览器最上侧的距离。
如果父元素有定位，获取距离父元素最上侧的距离。

console.log(child.offsetTop);

二、client

1.clientWidth

获取可视范围的宽度。
当盒子内部存在滚动条时，获得的宽度不包括滚动条。
clientWidth：width + 左右padding

console.log(child.clientWidth);

2.clientHeight

获取可视范围的高度。
当盒子内部存在滚动条时，获得的高度不包括滚动条。
clientHeight：height + 上下padding

console.log(child.clientHeight);

3.clientLeft

获得左边框的宽度。

console.log(child.clientLeft);

4.clientTop

获取上边框的高度。

console.log(child.clientTop);

三、scroll

html代码：

<div id="outer">
	<div id="inner">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
	</div>
</div>

css代码：

#outer {
	margin-top: 100px;
	width: 300px;
	height: 200px;
	background-color: aquamarine;
	overflow: auto;
}
#inner {
	width: 400px;
	height: 500px;
}

js代码：

var outer = document.getElementById('outer')

1.scrollWidth

获得元素的实际宽度。
在内容没有超出盒子时，获得的是盒子的内部宽度。
内容超出盒子时，获得的是内容实际应有的宽度。
当盒子内部存在滚动条时，获得的宽度不包括滚动条。
scrollWidth：width + 滚动条滚动距离

console.log(outer.scrollWidth);

2.scrollHeight

获取可视范围的高度。
在内容没有超出盒子时，获得的是盒子的内部高度。
内容超出盒子时，获得的是内容实际应有的高度。
当盒子内部存在滚动条时，获得的高度不包括滚动条。
scrollHeight：height + 滚动条滚动距离

console.log(outer.scrollHeight);

3.scrollLeft

获得的是内容卷曲出去的宽度。
当滚动条向右拉时，内容往左走，获得的就是右面跑出盒子范围的那部分宽度。

console.log(outer.scrollLeft);

4.scrollTop

获得的是内容卷曲出去的高度。
当滚动条向下拉时，内容往上走，获得的就是上面跑出盒子范围的那部分高度。

console.log(outer.scrollTop);

---

总结

以上就是今天的内容。