JavaScript：所有视图属性和方法（innerWidth、outerHeight、clientX等）

本文只是总结了各个视图属性的含义，其中⭐处建议背下来，至于兼容性也是非常重要的，具体可以看文末链接。
本文内容分为五大部分：

1.Window视图属性

• innerHeight 和 innerWidth
• outerHeight 和 outerWidth
• pageXOffset 和 pageYOffset
• screenX 和 screenY

2.Screen视图属性

• availWidth 和a vailHeight
• colorDepth
• pixelDepth
• width 和 height

3.文档视图(DocumentView)和元素视图(ElementView)方法

• document.elementFromPoint()
• element.getBoundingClientRect()⭐滑动栏滚动的时候常用
• document.getClientRects()
• element.scrollIntoView()

4.元素视图属性

• clientHeight 和 clientWidth
• clientLeft 和 clientTop
• offsetWidth 和 offsetHeight
• offsetLeft 和 offsetTop
• offsetParent
• scrollHeight 和 scrollWidth
• scrollLeft 和 scrollTop
• scrollLeftMax 和 scrollTopMa

5.鼠标位置

• clientX 和 clientY
• offsetX 和 offsetY
• pageX 和 pageY
• screenX 和 screenY
• x 和 y

⭐一、window视图属性

1.innerWidth 属性和 innerHeight 属性：表示获取window窗体的内部宽度和高度，不包括用户界面元素，比如窗框。
2.outerWidth属性和outerHeight属性：表示整个浏览器窗体的大小，包括任务栏等。
3. pageXOffset和pageYOffset：表示整个页面滚动的像素值（水平方向的和垂直方向的）。
4.screenX and screenY：浏览器窗口在显示器中的位置，screenX表示水平位置，screenY表示垂直位置。

二、Screen视图属性

1. availWidth和availHeight：显示器可用宽高，不包括任务栏之类的东东。
2. colorDepth：表示显示器的颜色深度。
3. pixelDepth：该属性基本上与colorDepth一样。
4. width和height：表示显示器屏幕的宽高。包括任务栏。

三、文档视图(DocumentView)和元素视图(ElementView)方法

1. elementFromPoint()：返回给定坐标处所在的元素。
2. getBoundingClientRect()：得到矩形元素的界线，返回的是一个对象，包含 top, left, right, 和 bottom四个属性值，大小都是相对于文档视图左上角计算而来。
3. getClientRects()：返回元素的数个矩形区域，返回的结果是个对象列表，具有数组特性。
4. scrollIntoView()：让元素滚动到可视区域（不属于草案方法）。

⭐四、元素视图属性

1.clientLeft和clientTop：表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。
2.clientWidth和clientHeight：表示内容区域的高度和宽度，包括padding大小，但是不包括边框和滚动条。
3. offsetLeft和offsetTop：表示相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值。
4.offsetParent：第一个祖定位元素（即用来计算上面的offsetLeft和offsetTop的元素）
5. offsetWidth和offsetHeight：整个元素的尺寸（包括边框）。
6. scrollLeft和scrollTop：表示元素滚动的像素大小。可读可写。
7.scrollWidth和scrollHeight：表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollHeight应该等用于scrollTop + clientHeight。

⭐五、鼠标位置(Mouse position)

1. clientX,clientY：相对于window，为鼠标相对于window的偏移。
2. offsetX, offsetY：表示鼠标相对于当前被点击元素padding box的左上偏移值。
3. pageX, pageY：为鼠标相对于document的坐标。IE6~IE8浏览器是不支持的。
4. screenX, screenY：鼠标相对于显示器屏幕的偏移坐标。
5. x, y：相当于clientX/clientY。既然已经有了clientX/clientY，为什么还需要x, y呢？莫非是为了少写几个字母？谁知道呢！

以上总结自：CSSOM视图模式(CSSOM View Module)相关整理