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;
觉得本文对你有帮助，添加[自学前端之路]公众号
