1.offset属性

(1)offsetHeight和 offsetWidth

获取元素的高度和宽度

offsetWidth = padding+border+width

offsetHeight = padding+border+width

(2)offsetTop和 offsetLeft

获取距离第一个有定位的(除了设置static)父级盒子的左边和右边的距离，这个距离是指从子盒子的边框到父盒子的padding的距离,不算大盒子的border

(3)offsetParent

返回距离第一个有定位的父盒子

2.scroll属性

(1)scrollHeight和 scrollWidth

scrollHeight和scrollWidth分为两种情况，如果盒子里面的里面没有超出就是盒子的大小,如果超出了形成滑动那将是这个里面所有内容的高度,包含超出部分的

(2)scrollTop和 scrollLeft

获取的的是超出当前元素的距离​

3.client属性

(1)clientHeight和 clientWidth

clientHeight = padding + height;

clientWidth = padding + width;

这个计算的高度宽度不包含边框

(2)clientTop和 clientLeft

计算的是边框的大小，就是紫色的高度和宽度

clientTop = 5px;

4.其他属性

(1).getBoundingClientRect

不管在什么位置都获取的都是距离页面显示区左上角的位置,这个函数返回的是ClientRect属性，分别代表: bottom: 底部距离页面顶部的距离

height: 高度 包含边框

left: 左边距离页面顶部的距离

right: 右边距离页面顶部的距离

top: 顶部距离页面顶部的距离

width: 宽度 包含边框

x: 左边距离页面顶部的距离

y: 右边距离页面顶部的距离

垂直滚动的时候y和top都会发生变化，但是都是获取的网页右上角的位置，

这个函数一般使用于当前元素是否出现在界面中用于懒加载。

(2).鼠标点击获取位置的属性

pageX,pageY 是距离屏幕上方的位置+滑动的位置
clientX,clientY 是距离屏幕上方的位置 不计算滑动

(3).获取屏幕的宽高

innerHeight和innerWidth获取屏幕可见区域的宽高
浏览器兼容的写法 var height =window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

                觉得本文对你有帮助，添加[自学前端之路]公众号