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 // 滚动条高度/宽度
