JavaScript偏移量offset，可视区client，滚动scroll系列

JavaScript偏移量offset，可视区client，滚动scroll系列

一.
element.offsetTop element.offsetLeft
以上两种方法获得元素距离其父元素的上距离与左距离，但是父元素得设置定位，若没有设置定位，则以body为主

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box1 {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px;
            background-color: blanchedalmond;
        }
        
        .son {
            width: 100px;
            height: 100px;
            margin-left: 100px;
            background-color: black;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 500px;
            margin-left: 300px;
            border: 20px solid red;
            padding: 20px 20px;
        }
</style>
<div class="box1">
        <div class="son"></div>
</div>
<div class="box2"></div>
<script>
		var box1 = document.querySelector('.box1');
        console.log(box1.offsetTop);  //100
        console.log(box1.offsetLeft);  //100
        var son = document.querySelector('.son');
        console.log(son.offsetTop);  //0
        console.log(son.offsetLeft);  //100
</script>

element.offsetWidth element.offsetHeight
以上两种方法获得元素自身的宽度和高度(包含padding，border)

var box2 = document.querySelector('.box2');
console.log(box2.offsetWidth);  //280
console.log(box2.offsetHeight);  //280

element.offsetParent
以上方法获得带有定位的父级元素，若没有设置定位，返回body

console.log(son.offsetParent);  //.box1

二.
client不含边框，其余的与offset相似
clientTop返回上边框大小，clientLeft返回左边框大小
clientWidth返回不含边框的宽度，clientHeight返回不含边框的高度

三.
scroll系列返回的是数值且不带单位
1. element.scrollTop:返回被卷去的上侧距离
2. element.scrollLeft:返回被卷去的左侧距离
3. element.scrollWidth:返回自身实际的宽度，不含边框(盒子里面内容撑开的宽度)
4. element.scrollHeight:返回自身实际的高度，不含边框(盒子里面内容撑开的高度)
5. window.pageYOffset获得页面被卷去的头部距离
window.pageXOffset获得页面被卷去的左侧距离