CSSOM视图模式(CSSOM View Module)定义了一些 API，Web 开发人员使用这些 API 可以进行检查，也可以以编程方式更改文档及其内容的视觉属性，包括布局框定位、视区宽度和元素滚动。
以下就是一些API属性的相关内容，包括兼容性，使用，测试等。
一、Window视图属性
这些属性可以hold住整个浏览器窗体大小。微软则将这些API称为“Screenview 接口”。包括：innerWidth 属性和 innerHeight 属性pageXOffset 属性和 pageYOffset 属性screenX 属性和 screenY 属性outerWidth 属性和 outerHeight 属性
相关属性组对应的兼容性以及使用见下面。
1. innerWidth 属性和innerHeight 属性
例如innerWidth表示获取window窗体的内部宽度，不包括用户界面元素，比如窗框。
使用如下示例代码：
window.innerWidth
window.innerHeight对于支持该属性的浏览器 弹出的就是类似下面的结果：
innerWidth和innerHeight属性只读，没有默认值。
2. outerWidth属性和outerHeight属性
outerWidth/outerHeight表示整个浏览器窗体的大小，包括任务栏等。
window.outerWidth
window.outerHeight对于支持该属性的浏览器 弹出的就是类似下面的结果：
outerWidth和outerHeight属性只读，没有默认值。
3. pageXOffset和pageYOffset
表示整个页面滚动的像素值（水平方向的和垂直方向的）。
window.pageXOffset
window.pageYOffset
pageXOffset和pageYOffset属性只读，没有默认值。
4. screenX and screenY
浏览器窗口在显示器中的位置，screenX表示水平位置，screenY表示垂直位置。
window.screenX
window.screenY一般浏览器全屏状态下，这两个值都是0，如果窗口化浏览器并拖动，就能发现这两个值的变化了。
二、文档视图(DocumentView)和元素视图(ElementView)方法
elementFromPoint()getBoundingClientRect()getClientRects()scrollIntoView()
1. elementFromPoint()
返回给定坐标处所在的元素。是个在目前而言，兼容性不错的方法，见下表：
document.elementFromPoint(100,100)通过这个方法，可以拿到在相对页面左上角(100, 100)坐标处的页面元素。
2. getBoundingClientRect()
得到矩形元素的界线，返回的是一个对象，包含 top, left, right, 和 bottom四个属性值，大小都是相对于文档视图左上角计算而来。返回内容类似于：
{
top: 143,
right: 1196,
bottom: 164,
left: 889
}
兼容性如下：
3. getClientRects()
这个方法与上面的方法相近，只不过返回的是一个数组，数组中每个对象与上面方法类似。返回元素的数个矩形区域，返回的结果是个对象列表，具有数组特性。这里的矩形选区只针对inline box，因此，只针对a, span, em这类标签元素，兼容性
对于按照规范来走的浏览器，点击demo页面右半区域的文字部分，就会弹出一些文字（显示的个数就是文字的行数），例如，我的浏览器下就显示“2个矩形”，如
getClientRects()方法是跟着line box模型走的，其返回的每个矩形区域其实就是一个line boxes，也就是一行文字内容。
也就是说，例如一段文字在一个span标签下，如果这个span标签内的文字有两行，则getClientRects()返回的就是含有两个Rect对象的列表；如果文字是三行就三个。
getClientRects和getBoundingClientRect差异
getClientRects返回的其实是个数组，数组中有很多个类似getBoundingClientRect返回的对象。getBoundingClientRect返回的永远是最外框框的那个矩形区域相关的坐标偏移对象；而getClientRects是多行文字区域的坐标偏移集合，在非IE浏览器下，只对inline水平的标签有反应。
一般getBoundingClientRect方法用的多一点。我们可以很容易获取某个元素的偏移值。甚至高宽都能很轻松的计算出来。
4. scrollIntoView()
让元素滚动到可视区域（不属于草案方法）。兼容性如下：
document.getElementById("index").scrollIntoView();
这样伴随浏览器的滚动，可以让原本处于当前可视区域外的id="index"元素回到可视区域中此方法的兼容性甚是不错。这为我们实现元素的锚点跳转功能又敞开了另外一条途径。
三、元素视图属性
关于元素大小位置等信息的一些属性。有：clientLeft和clientTopclientWidth和clientHeightoffsetLeft和offsetTopoffsetParentoffsetWidth和offsetHeightscrollLeft和scrollTopscrollWidth和scrollHeight
1. clientLeft和clientTop
表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。其兼容性不错，如下：
这个属性我自己测试发现，返回的就是元素border的距离，clientLeft=border-left，clientTop=border-top
2. clientWidth和clientHeight
表示内容区域的高度和宽度，包括padding大小，但是不包括边框和滚动条。对于inline的元素这个属性一直是0，单位px，只读元素。兼容性跟上面一样：
3. offsetLeft和offsetTop
表示相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值。兼容性如下表：
4. offsetParent
第一个祖定位元素（即用来计算上面的offsetLeft和offsetTop的元素）
offsetParent元素只可能是下面这几种情况：
<body>position不是static的元素<table>,<th>或<td>，但必须要position: static。
body元素为定位元素的终极boss，所以其上头就没有其他定位元素了。也就是说body元素没有offsetParent（尽管有时候html进入offsetParent链）。
另外，在IE和Opera浏览器下，position: fixed的元素没有offsetParent。
5. offsetWidth和offsetHeight
整个元素的尺寸（包括边框）。包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。
6. scrollLeft和scrollTop
表示元素滚动的像素大小。代表在有滚动条时，滚动条向下，向左滚动的距离也就是元素被遮住部分的距离。在没有滚动条时scrollTop==0，scrollLeft==0恒成立。单位px，可读可设置。
element.scrollLeft
element.scrollTop
element.scrollTop = 207.scrollWidth和scrollHeight
表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候，scrollHeight应该等用于scrollTop + clientHeight。
scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。
兼容性有点微妙：
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
