CSSOM 视图模式

一、Window视图属性

这些属性可以hold住整个浏览器窗体大小。微软则将这些API称为“Screenview 接口”。包括：

innerWidth 属性和 innerHeight 属性
pageXOffset 属性和 pageYOffset 属性
screenX 属性和 screenY 属性
outerWidth 属性和 outerHeight 属性

1. innerWidth 属性和innerHeight 属性

window.innerWidth
window.innerHeight

浏览器内容区域的宽高，包括滚动条；

2. outerWidth属性和outerHeight属性

window.outerWidth
window.outerHeight

整个浏览器窗体的大小，包括任务栏、firebug等

3. pageXOffset和pageYOffset

表示整个页面滚动的像素值（水平方向的和垂直方向的），滚出窗口的部分。

window.pageXOffset
window.pageYOffset

4. screenX and screenY

浏览器窗口在显示器中的位置，screenX表示水平位置，screenY表示垂直位置

window.screenX
window.screenY

注意：这儿说的浏览器窗口指的是里面内容部分，不包括收藏栏、状态栏等。

---

二、Screen视图属性

显示器信息相关的属性：
availWidth和availHeight
colorDepth
pixelDepth
width和height

这类API又被称为“Screen 接口”。相关兼容性与特性依次见下面内容：

1. screenX and screenY

显示器可用宽高，不包括任务栏之类的东东。

screen.availWidth
screen.availHeight

2. colorDepth

表示显示器的颜色深度

screen.colorDepth

一般的值是24

3. pixelDepth

该属性基本上与colorDepth一样，兼容性不一样。

screen.pixelDepth

4. width和height

表示显示器屏幕的宽高。其兼容性还是很不错的

screen.width
screen.height

---

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

elementFromPoint()
getBoundingClientRect()
getClientRects()
scrollIntoView()

1. elementFromPoint()

返回给定坐标处所在的元素，兼容性较好。

2. getBoundingClientRect()

兼容性较好.
得到矩形元素的界线，返回的是一个对象，包含 top, left, right, 和 bottom四个属性值，大小都是相对于文档视图左上角计算而来。

四、元素视图属性

关于元素大小位置等信息的一些属性。有：
clientLeft和clientTop
clientWidth和clientHeight
offsetLeft和offsetTop
offsetParent
offsetWidth和offsetHeight
scrollLeft和scrollTop
scrollWidth和scrollHeight