client、page、screen、offset区别
clientX 鼠标相对于浏览器左上角x轴的坐标 ; 不随滚动条滚动而改变 ;
clientY 鼠标相对于浏览器左上角y轴的坐标 ; 不随滚动条滚动而改变 ;
pageX 鼠标相对于浏览器左上角x轴的坐标 ; 随滚动条滚动而改变 ;
pageY 鼠标相对于浏览器左上角y轴的坐标 ; 随滚动条滚动而改变 ;
screenX 鼠标相对于显示器屏幕左上角x轴的坐标 ;
screenY 鼠标相对于显示器屏幕左上角y轴的坐标 ;
offsetX 鼠标相对于事件源左上角X轴的坐标 ;
offsetY 鼠标相对于事件源左上角Y轴的坐标 ;
offsetLeft 元素相对于左边的距离;
offsetY 元素相对于上边的距离;
元素视图的属性和方法
/******* 元素视图属性* offsetWidth 水平方向 width + 左右padding + 左右border-width* offsetHeight 垂直方向 height + 上下padding + 上下border-width* * clientWidth 水平方向 width + 左右padding* clientHeight 垂直方向 height + 上下padding* * offsetTop 获取当前元素到 定位父节点 的top方向的距离* offsetLeft 获取当前元素到 定位父节点 的left方向的距离* * scrollWidth 元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth* scrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight* ****** 元素视图属性结束* ****** Window视图属性（低版本IE浏览器[<IE9]不支持） 【自测包含滚动条，但网络教程都说不包含？？？】* innerWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏） * innerHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏）* ***** Window视图属性结束* ****** Document文档视图* （低版本IE的innerWidth、innerHeight的代替方案）* document.documentElement.clientWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条）* document.documentElement.clientHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条）* * document.documentElement.offsetHeight 获取整个文档的高度（包含body的margin）* document.body.offsetHeight 获取整个文档的高度（不包含body的margin）* * document.documentElement.scrollTop 返回文档的滚动top方向的距离（当窗口发生滚动时值改变）* document.documentElement.scrollLeft 返回文档的滚动left方向的距离（当窗口发生滚动时值改变）****** Document文档视图结束* ****** 元素方法* 1. getBoundingClientRect() 获取元素到body* bottom: 元素底边（包括border）到可视区最顶部的距离* left: 元素最左边（不包括border）到可视区最左边的距离* right: 元素最右边（包括border）到可视区最左边的距离* top: 元素顶边（不包括border）到可视区最顶部的距离* height: 元素的offsetHeight* width: 元素的offsetWidth* x: 元素左上角的x坐标 * y: 元素左上角的y坐标 在这里插入代码片* * 2. scrollIntoView() 让元素滚动到可视区* * ***** 元素方法结束* */
浏览器
window.outerHeight //浏览器高度window.outerWidth //浏览器宽度window.innerHeight //浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度window.innerWidth //浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。window.outerHeight - window.innerHeight //工具栏高/宽度，包含了地址栏、书签栏、浏览器边框等范围
屏幕
screen.height //屏幕高度screen.width //屏幕宽度screen.availHeight //屏幕可用高度，即屏幕宽度减去上下任务栏后的高度screen.availWidth //屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度screen.height - screen.availHeight //任务栏高度```
页面信息
body.offsetHeight // body总高度body.offsetWidth // body总宽度body.clientHeight // body展示的高度；表示body在浏览器内显示的区域高度body.clientWidth // body展示的宽度；表示body在浏览器内显示的区域宽度window.innerHeight - body.clientHeight // 滚动条高度/宽度