持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
1. 可视宽高 clientWidth/clientHeight
说明：包含 content + padding
只读属性，属性值的类型数字
如果内容溢出造成滚动条，会相应减去滚动条的宽度
div {
box-sizing: border-box;
width: 400px;
height: 300px;
border: 20px solid burlywood;
background-color: antiquewhite;
overflow: auto;
}
<div> </div>
var div = document.querySelector('div');
console.log(div.clientWidth); //360
console.log(div.clientHeight); //260
当在div内加一个宽高都比自己多的元素，再看一下他的clientWidth和clientHeight如图
<style>
section {
width: 1000px;
height: 1000px;
background-color: aquamarine
}
</style>
<div>
<section></section>
</div>
<script>
console.log(div.clientWidth); //343
console.log(div.clientHeight); //243
</script>
由此可见获取到的clienWidth和clientHeight时,如果内容溢出造成滚动条，会相应减去滚动条的宽度
clientWidth和clientHeight常用于获取浏览器窗口大小，还可监听浏览器窗口变化
var html = document.documentElement;
window.onresize = function () {
console.log('大小正在变化');
console.log(html.clientWidth, html.clientHeight);
};
2. 实际宽高 offsetWidth/offsetHeight
说明：包含 border + padding + content
和内容大小无关
只读属性，属性值的类型 数字
console.log(div.offsetWidth, div.offsetHeight);//400 300
由上面两图看出offsetWidth和offsetHeight是包含border的，且就算内容超出显示滚动条，也不会改变offsetWidth和offsetHeight的值，所以和内容的大小无关
3.左边框厚度clientLeft和上边框厚度clientTop
说明：只读属性，属性值的类型 数字
更改div的border宽度，打印可得出左边框厚度和上边框厚度
div {
border-width: 10px 20px 30px 40px;
}
<script>
console.log(div.clientLeft, div.clientTop);//40 10
</script>
4.内容宽高 scrollWidth/scrollHeight
说明：如果没有内容溢出，则等同于 clientWidth/clientHeight
如果存在内容溢出，是内部元素空间的大小，包含内边距区域且不包含滚动条，只读属性;
console.log(div.scrollWidth, div.scrollHeight); //360 260
由此可见如果没有内容溢出，scrollWidth/scrollHeight等同于 clientWidth/clientHeight
当元素超出又会怎么打印
<style>
section {
width: 1000px;
height: 1000px;
background-color: aquamarine;
padding: 20px 30px 40px 50px;
}
</style>
<div>
<section></section>
</div>
由图可见如果存在内容溢出，是内部元素空间的大小，包含内边距区域且不包含滚动条
5.搭配绝对定位属性的 offsetLeft/offsetTop
说明：包含元素的 left/top 样式值 + 自身左侧/上方外边距
只读属性
<style>
div {
box-sizing: border-box;
width: 400px;
height: 300px;
border: 20px solid burlywood;
background-color: antiquewhite;
overflow: auto;
position: absolute;
left: 300px;
top: 100px;
margin: 10px 20px 30px 40px;
}
</style>
<script>
console.log(div.offsetLeft, div.offsetTop);
</script>
由上图显示的打印值可见：offsetLeft/offsetTop包含元素的 left/top 样式值 + 自身左侧/上方外边距
6.滚动距离 scrollTop/scrollLeft
说明：监听滚动事件，动态获取滚动过的距离
可读写
div.onscroll = function () {
console.log(div.scrollTop, div.scrollLeft);
if (div.scrollTop > 200) {
div.scrollTop = 200;
}
}
通过div的onscroll事件获取当前的scrollTop/scrollLeft，并且当scrollTop大于200时，修改scrollTop为200，由上图可知scrollTop/scrollLeft具有读写属性，而且scrollTop常用于返回顶部，scrollTop也可实现类似于聊天室，微信来新信息向上弹出！
