BOM

offset :以目标元素的左上角为基准点得到的坐标
screenY: 以屏幕的左上角为基准点得到的坐标
 client: 以浏览器可视区域的左上角为基准点得到的坐标
 layer: 以页面的左上角为基准点得到的坐标

*content_box
* clientTop:上边框宽度
* clientWidth:样式的宽度+左右padding
* scrollTop:对象被卷去的高度
* scrollHeight:对象实际高度
* offsetTop:对象的上边框到页面的顶部
* offsetWidth:样式宽度+左右padding+左右border
*
*
* border_box
* clientTop:上边框宽度
* clientWidth:样式的宽度-左右border
* scrollTop:对象被卷去的高度
* scrollHeight:对象实际高度
* offsetTop:对象的上边框到页面的顶部
* offsetWidth:样式宽度
* */

clientTop:上边框的宽度
clientRight:右边框的宽度
clientBottom:下边框的宽度
clientLeft:左边框的宽度
clientWidth:自身的宽度(不包括边框)[样式里面的宽度]
clientHeight:自身的高度(不包括边框)[样式里面的高度]

*.style:得到的是行内样式

scrollTop:被卷去的高度
scrollLeft:被卷去的宽度
scrollWidth自身的宽度(包括边框)[真实宽度]
scrollHeight:自身的高度(包括边框)[真实高度]

offsetTop:自己的上边框之外到父容器的内容之外
offsetLeft:自己的左边框到屏幕的距离(不管有没有父容器)
offsetWidth:自身的宽度(包括边框)[样式里面的宽度]
offsetHeight:自身的高度(包括边框)[样式里面的高度]

window.screen.屏幕宽度
window.screen.height:屏幕高度
window.screen.availWidth:除去系统左边部菜单栏的宽度
window.screen.availHeight:除去系统底边部菜单栏的高度
window.outerWidth:浏览器的宽度
window.outerHeight:浏览器的高度
window.innerWidth:浏览器除去调试工具的宽度(包括边框)
window.innerHeight:浏览器除去调试工具的高度(包括边框)

原文地址:https://www.cnblogs.com/james-L/p/8035464.html