背景：对JS的各种宽和高的概念总是有一种模糊感，所以好好梳理了一下，本文实例代码不多，更多是总结它的概念，建议多实际操作以下，印象会更深，如果有和我一样感到困惑的小伙伴，希望这篇文章对大家有所帮助
window.innerWidth/innerHeight
描述：浏览器可见区域的内宽度、高度（不含浏览器的边框，但包含滚动条）
alert(window.innerWidth);// ie6/7/8=>undefinedalert(window.innerHeight);// ie6/7/8=>undefined
window.outerWidth/outerHeight
描述：浏览器外宽度（包含浏览器的边框，因各个浏览器的边框边一样，得到的值也是不一样的）
alert(window.outerWidth);// ie6/7/8=>undefinedalert(window.outerHeight);// ie6/7/8=>undefined
window.screenLeft/screenTop
alert(window.screenLeft);// firefox=>undefinedalert(window.screenTop);// firefox=>undefined
window.screenX/screenY
描述：浏览器的位移，表示：
ie9/10浏览器的外边缘距离屏幕边缘的距离
chrome浏览器的外边缘距离屏幕边缘的距离
alert(window.screenX);// ie6/7/8=>undefinedalert(window.screenY);// ie6/7/8=>undefined
window.pageXOffset/pageYOffset
表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离
document.=function(){
alert(window.pageXOffset); // ie6/7/8=>undefinedalert(window.pageYOffset); // ie6/7/8=>undefined};window.scrollX/scrollY
描述：表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离
document.=function(){
alert(window.scrollX); // ie6/7/8/9/10=>undefinedalert(window.scrollY); // ie6/7/8/9/10=>undefined};screen.width/height
描述：屏幕的宽度、高度（指的是屏幕的分辨率，单位为像素）
兼容性：ie6/7/8/9/10、chrome、firefox
下面自己要测试的话~ 可以看上边的代码 ，就不贴代码了，主要解释下它的含义
screen.availWidth/availHeight
描述：屏幕的可用宽度、高度（通常与屏幕的宽度、高度一致）。
兼容性：ie6/7/8/9/10、chrome、firefox。
elment.clientWidth/clientHeight
描述：计算如下：
有滚动条时：clientWidth=元素左内边距宽度+元素宽度+元素右内边距宽度-元素垂直滚动条宽度
无滚动条时：clientWidth=元素左内边距宽度+元素宽度+元素右内边距宽度
兼容：chrome、firefox、ie6/7/8/9/10
element.clientLeft/clientTop
描述：clientLeft为左边框宽度，clientTop为上边框宽度。
兼容：chrome、firefox、ie6/7/8/9/10。
element.offsetWidth/offsetHeight
描述：offsetWidth=元素左边框宽度+元素左内边距宽度+元素宽度+元素右内边距宽度+元素右边框宽度。
兼容：chrome、firefox、ie6/7/8/9/10。
element.offsetLeft/offsetTop
描述：表示该元素相对于最近的定位祖先元素的距离，
chrome：offsetLeft=定位祖先左边框宽度+定位祖先元素左内边距宽度+左位移+左外边距宽度
ie6/7/8/9/10、firefox：offsetLeft=定位祖先元素左内边距宽度+左位移+左外边距宽度。
兼容：chrome、firefox、ie6/7/8/9/10。
element.scrollWidth/scrollHeight
描述：计算方法如，
有滚动条时：
chrome、firefox、ie8/9/10：左内边距宽度+内容宽度。
ie6/7：左内边距宽度+内容宽度+右内边距宽度（是由CSS的BUG引起）。
无滚动条时：左内边距宽度+宽度+右内边距宽度。
兼容：chrome、firefox、ie8/9/10、ie6/7（半兼容）。
element.scrollLeft/scrollTop
描述：获得水平、垂直滚动条的距离。
兼容：chrome、firefox、ie6/7/8/9/10。
关于坐标问题的总结
假设我们这里的元素是一个DIV，我们打印它的event对象，来看看它的属性
//相关属性解释clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。 clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。 screenY 事件属性可返回事件发生时鼠标指针相对于屏幕的垂直坐标。 offsetX 事件发生的地点在事件源元素的坐标系统中的 x 坐标(ie)。 offsetY 事件发生的地点在事件源元素的坐标系统中的 y 坐标(ie)。 x 事件发生的位置的 x 坐标, 它相对于用CSS动态定位的最内层包容元素(ie,~pageX)。 y 事件发生的位置的 y 坐标, 它相对于用CSS动态定位的最内层包容元素(ie,~pageY)。 pageX 鼠标指针的位置，相对于文档的左边缘(firefox,~x)。 pageY 鼠标指针的位置，相对于文档的上边缘(firefox,~y)。 layerX 鼠标相比较于当前坐标系的位置(firefox,~offsetX)。 layerY 鼠标相比较于当前坐标系的位置(firefox,~offsetY)。
怎样获取鼠标相对于浏览器可视文档区域左上角的位置？
x, y和clientX, clientY皆可，但是x, y在IE下表示鼠标相对于文档开头的位置（即如果有滚到条的话，会计算在内），还有FF也不支持x, y
推荐： clientX, clientY怎样获取鼠标相对于文档开头的位置？
IE：使用x, y（前提是事件源的父元素（一直到documentElement）没有设置position:relative之类的，否则相对于最近元素，而非相对于文档）
非IE：使用pageX, pageY
layerX, layerY其实也可以，但是IE和Opera不支持据上面， 如何确保IE正常取值呢？
(event.clientX + document.documentElement.scrollLeft, event.clientY + document.documentElement.scrollTop )
怎样获取鼠标相对于事件源(event.target||event.srcElement)左上角的位置？
offsetX, offsetY。但是FF不支持，怎样办呢？
先获取鼠标相对于浏览器可视文档区域左上角的位置
然后获取事件源相对于浏览器可视文档区域左上角的位置
相减
第2步怎么做?
HTMLElement.getBoundingClientRect()方法
返回值为：{top:xx, right:xx, bottom:xx, left:xx, width:xx, height:xx}
//var box = (e.target || e.srcElement).getBoundingClientRect(),
offsetX = e.clientX - box.left,
offsetY = e.clientY - box.top;
作者：可爱的圣诞老人
链接：https://www.jianshu.com/p/6fc379c7d939
随时随地看视频
