client,offset,scroll系列

1.client系列:

• clientTop: 内容到边框顶部的距离, 即边框的高度.
• clientLeft: 内容区域到边框左部的区域, 即边框的宽度.
• clientWidth: 内容区域+左右padding, 表示可视宽度.
• clientHeight: 内容区域+上下padding, 表示可视高度.

2.屏幕的可视区域:

<script>
    // 屏幕的可视区域
    window.onload = function(){
        // document.documentElement 获取的是html标签
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);
        // 窗口大小发生变化时，会调用此方法
        window.onresize = function(){    
            console.log(document.documentElement.clientWidth);
            console.log(document.documentElement.clientHeight);
        }
    }
</script>

3.offset系列

• offsetWidth: 占位宽=内容+padding+border.
• offsetHeight: 占位高.
• offsetTop: 如果盒子没有设置定位, offsetTop表示到body顶部的距离; 如果盒子设置了定位, 那么offsetTop是以父辈为基准的top值.
• offsetLeft: 如果盒子没有设置定位, offsetLeft表示到body左部的距离; 如果盒子设置了定位, 那么offsetLeft是以父辈为基准的left值.

4.scroll系列

• scrollTop
• scrollLeft
• scrollWidth
• scrollHeight: 内容的高度+padding, 不包含边框.