offset、client、scroll系列的区别
先造三个盒子，并给定样式
#box1 {
width: 300px;
height: 300px;
background-color: rgb(190, 187, 187);
margin: 50px;
/*解决塌陷*/
overflow: hidden;
}
#box2 {
width: 200px;
height: 200px;
background-color: rgb(118, 236, 230);
margin: 50px;
overflow: hidden;
border: 5px solid green;
padding: 5px;
}
#box3 {
width: 100px;
height: 100px;
background-color: rgb(231, 229, 73);
margin: 50px;
}
offset
// box1
console.log(box1.offsetLeft); // 50
console.log(box1.offsetTop); // 50
console.log(box1.offsetWidth); // 400
console.log(box1.offsetHeight); // 400
// box2
console.log(box2.offsetLeft); // 100
console.log(box2.offsetTop); // 100
console.log(box2.offsetWidth); // 230
console.log(box2.offsetHeight); // 230
// box3
console.log(box3.offsetLeft); // 165
console.log(box3.offsetTop); // 165
console.log(box3.offsetWidth); // 100
console.log(box3.offsetHeight); // 100
根据输出结果我们可以判断
offsetLeft：表示该盒子左边界距离body的距离
offsetTop：表示该盒子上边界距离body的距离
offsetWidth ：表示该盒子的宽度（含边框和padding值）
offsetHeight：表示该盒子的高度（含边框和padding值）
client
// box1
console.log(box1.clientLeft); // 0
console.log(box1.clientTop); // 0
console.log(box1.clientWidth); // 400
console.log(box1.clientHeight); // 400
// box2
console.log(box2.clientLeft); // 5
console.log(box2.clientTop); // 5
console.log(box2.clientWidth); // 220
console.log(box2.clientHeight); // 220
// box3
console.log(box3.clientLeft); // 0
console.log(box3.clientTop); // 0
console.log(box3.clientWidth); // 100
console.log(box3.clientHeight); // 100
根据输出结果我们可以判断
clientLeft：左边框的宽度
clientTop：上边框的宽度
clientWidth：表示盒子宽度（包含padding值，但不计算边框）
clientHeight：表示盒子高度（包含padding值，但不计算边框）
scroll
重新构造一个页面
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: rgb(56, 56, 41);
color: #ffffff;
padding: 10px;
border: 5px solid #1bc0d6;
margin: 100px;
overflow: auto;
}
</style>
</head>
<body>
<div id="box">
关关雎鸠，在河之洲。窈窕淑女，君子好逑。
参差荇菜，左右流之。窈窕淑女，寤寐求之。
求之不得，寤寐思服。悠哉悠哉，辗转反侧。
参差荇菜，左右采之。窈窕淑女，琴瑟友之。
参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。
</div>
<script>
var box = document.getElementById('box')
console.log(box.clientWidth); // 103 计算padding 不算border （不计算滚动条的 17）
console.log(box.clientHeight); // 120
console.log(box.scrollHeight); // 440 获取的整个内容的高度，包括隐藏掉的内容
console.log(box.scrollWidth); // 103 计算padding 不算border （不计算滚动条的 17）
console.log(box.scrollTop); // 0
console.log(box.scrollLeft); // 0
box.onscroll = function () {
console.log(box.scrollTop); // 显示内容划上去的距离
}
</script>
</body>
</html>
根据输出结果我们可以判断
scrollLeft：向左划出去的距离
scrollTop：向上划出去的距离
scrollWidth：盒子的宽度（计算padding 不算border和滚动条）
scrollHeight：获取的整个内容的高度，包括隐藏掉的内容