一、client
1、概念
client翻译过来就是客户端，我们使用client系列的相关属性来获取可视区的相关信息，通过client系列的相关属性，可以动态的得到该元素的边框大小，元素大小等
2、client不包含边框，但是包含padding
（1）不定义边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
300px;
height: 200px;
background-color: darkred;
}
</style>
<script>
</script>
</head>
<body>
<div></div>
<script>
var div=document.querySelector("div");
console.log(div.clientWidth);
</script>
</body>
</html>
（2）定义边框
<style> div{ 300px; height: 200px; background-color: darkred; border: 10px solid red; } </style>
与offset不同，client的宽度不包括边框，但是包含padding
（3）返回边框的上/左边框大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
300px;
height: 200px;
background-color: darkred;
border: 20px solid red;
}
</style>
<script>
</script>
</head>
<body>
<div></div>
<script>
var div=document.querySelector("div");
console.log(div.clientTop);
console.log(div.clientLeft)
</script>
</body>
</html>
二、scroll
1、不包含边框，但是包含padding
（1）不包含边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
300px;
height: 200px;
background-color: darkred;
border: 20px solid red;
}
</style>
</head>
<body>
<div></div>
<script>
var div=document.querySelector("div");
console.log(div.scrollHeight);
</script>
</body>
</html>
（2）返回的是内容的宽度或高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
30px;
height: 20px;
background-color: darkred;
border: 2px solid red;
}
</style>
</head>
<body>
<div>床前明月光床前明月光床前明月光</div>
<script>
var div=document.querySelector("div");
console.log(div.scrollHeight);
console.log(div.scrollWidth);
</script>
</body>
</html>
（3）添加滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
60px;
height: 30px;
background-color: darkred;
border: 2px solid red;
overflow: auto;
}
</style>
</head>
<body>
<div>床前明月光床前明月光床前明月光</div>
<script>
var div=document.querySelector("div");
console.log(div.scrollHeight);
console.log(div.scrollWidth);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
60px;
height: 30px;
background-color: darkred;
border: 2px solid red;
overflow: auto;
}
</style>
</head>
<body>
<div>床前明月光床前明月光床前明月光</div>
<script>
var div=document.querySelector("div");
console.log(div.scrollHeight);
console.log(div.scrollWidth);
</script>
</body>
</html>
（4）为滚动条添加事件，计算top
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
60px;
height: 30px;
background-color: darkred;
border: 2px solid red;
overflow: auto;
}
</style>
</head>
<body>
<div>床前明月光床前明月光床前明月光</div>
<script>
var div=document.querySelector("div");
console.log(div.scrollHeight);
console.log(div.scrollWidth);
div.addEventListener("scroll",function(){
console.log(div.scrollTop);
})
</script>
</body>
</html>
2、offset、client与scroll的对比
offset：返回自身包含padding、边框、内容区的宽度，返回值无单位，常用于获取元素的位置
client：返回自身包含padding、内容区的宽度、不含边框，返回值无单位，常用于获取元素的大小
scroll：返回自身实际的宽度，不含边框，返回值无单位，常用于获取滚动距离