JS的三大家族offset 、 scroll 、 client
一：offset家族
1.offsetWidth和offsetHeight
用来获取对象自身的宽度和高度，包括内容、边框、内边距。
offsetWidth = width + border + padding
offsetHeight = height + border + padding
<style>
#div1{
width: 200px;
height: 180px;
border: 15px solid blue;
padding: 10px;
background-color: hotpink;
margin: 40px;
}
</style>
<body>
<div id="div1"></div>
<div id="div2" style="width: 200px;height: 180px;"></div>
<script>
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2")
console.log("div1的offsetWidth和offsetHeight分别是："+div1.offsetWidth,div1.offsetHeight);
console.log("div1样式的width和height分别是："+div1.style.width,div1.style.height);
console.log("div2样式的width和height分别是："+div2.style.width,div2.style.height);
</script>
</body>
计算得：
div1.offsetWidth = 200 + 15×2 + 10×2 = 250
div1.offsetHeight = 180 + 15×2 + 10×2 = 230
运行结果为
2.offsetLeft和offsetTop
返回距离第一个有定位的父级盒子左边/上边的距离。
注意：
- 如果父级都没有定位的话则以body为准。
- 这里距离父级盒子左边/上边是从父盒子的padding位置开始算的，父盒子的border不计算在内。也就是说，offsetLeft和offsetTop就是子盒子到最近的带有定位的父盒子边框到边框的距离。
<style>
#father1{
width: 450px;
height: 350px;
padding: 10px;
border: 5px solid blue;
background-color: cadetblue;
margin: 50px;
}
#father2{
width: 300px;
height: 250px;
border: 5px solid yellow;
padding: 10px;
background-color: lightsalmon;
margin-left: 50px;
margin-top: 40px;
}
#son{
width: 200px;
height: 180px;
background-color: lightgreen;
border: 10px solid red;
margin-left: 40px;
margin-top: 30px;
}
</style>
<body>
<div id="father1">
<div id="father2">
<div id="son"></div>
</div>
</div>
<script>
var father1 = document.getElementById("father1");
var father2 = document.getElementById("father2");
var son = document.getElementById("son");
console.log("son的offsetLeft和offsetTop是："+son.offsetLeft,son.offsetTop)
</script>
</body>
运行结果：
二、scroll 家族
1.scrollWidth和scrollHeight
scrollWidth / scrollHeight = 元素自身的宽高 + padding
2.scrollLeft和scrollTop
- 返回当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离（如图），也可以用来指定元素的滚动条的位置。
- scrollLeft和scrollTop是可写的，可以通过设置它们来让元素中的内容滚动。
scroll事件（滚动事件）
element.onscroll = function(){页面滚动语句}
scrollTo(x,y)把内容滚动到指定的坐标。
格式：scrollTo(xpos,ypos)
--xpos 必需：要在窗口文档显示区左上角显示的文档的x坐标
---ypos 必需：要在窗口文档显示区左上角显示的文档的y坐标
三：client家族
1.clientWidth和clientHeight
返回元素自身的宽高+padding，不包括边框 border、外边距 margin 和滚动条。
clientWidth/clientHeight = 元素的宽度width/高度height + padding
获取浏览器网页可见区域大小的代码如下：
function getView() {
return {
width: document.body.clientWidth || document.documentElement.clientWidth,
height: document.body.clientHeight || document.documentElement.clientHeight
}
}
clientTop和clientLeft
- 返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离，通常这些值就等于左边和上边的边框宽度。
- 即返回元素上/左边框border的宽度，返回的是整数，是只读属性。
- 如果元素有滚动条，并且浏览器将这些滚动条旋转在左侧或顶部，它们就还包含了滚动条的宽度。
- 对于内联元素，它们总是为0。
