JS中各种宽高及坐标问题总结

背景：对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不支持，怎样办呢？

1. 先获取鼠标相对于浏览器可视文档区域左上角的位置

2. 然后获取事件源相对于浏览器可视文档区域左上角的位置

3. 相减
   第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