CSSOM视图模式(CSSOM View Module)

一.Window视图属性（window对象）

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

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

1.innerWidth 属性和 innerHeight 属性

描述：innerWidth表示获取window窗体的内部宽度，不包括用户界面元素,浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
兼容：现代浏览器获取的值相同，IE6/7/8是undefined无法获取值,以1920*1080分辩率测试(有收藏栏),chrome为1920*965,IE9以上1920*965,firefox:1920*955
方法：window.innerWidth;window.innerHeight;

//使用innerWidth和innerHeight来获取可视区的宽高，IE则使用clientWidth与clientHeight
function getViewPort(){
    var pageWidth = 0;
    var pageHeight = 0;
    if(!window.innerWidth){
        pageWidth = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
        pageHeight = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
    }else{
        pageWidth = window.innerWidth;
        pageHeight = window.innerHeight;
    }
    return{width:pageWidth,height:pageHeight};
}

2.outerWidth 属性和 outerHeight 属性

描述：outerWidth/outerHeight表示整个浏览器窗体的大小，包括所有界面元素（如工具栏/滚动条）
兼容：现代浏览器获取的值略有些不同，以1920*1080分辩率测试(显示器任务栏在底部)，chrome为1920*1050,IE9以上1936*1066,IE6/7/8是undefined无法获取值,firefox*1936*1066
方法：window.outerWidth;window.outerHeight;

3. pageXOffset 属性和pageYOffset 属性

描述：返回当前页面相对于窗口显示区位置,表示整个页面滚动的像素值（水平方向的和垂直方向的）
兼容：所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。注意： IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。
方法：window.pageXOffset;window.pageYOffset;

4.screenX 属性和 screenY 属性

描述：浏览器窗口在显示器中的位置，screenX表示水平位置，screenY表示垂直位置
兼容：所有主要浏览器都支持screenX和screenY属性。（chrome:从0,0开始，firefox是-8,-8开始）注意： IE 8 及 更早 IE 版本不支持该属性,IE低版本浏览器使用"window.screenLeft" 和 "window.screenTop"可获得相同的值
方法：window.screenX;window.screenY;

二、Screen视图属性（screen对象）

指能获取显示器信息的些属性。这类API又被称为“Screen 接口”。
availWidth 属性和 availHeight属性
colorDepth属性
pixelDepth属性
width 属性和 height 属性

1.availWidth 属性和 availHeight属性

描述：返回访问者显示器屏幕可用宽高，不包括任务栏
兼容：兼容性相当高：以1920*1080分辩率测试(显示器任务栏在底部,所有要减去任务栏40px)，chrome,IE,firefox的(screen.availWidth和screen.availHieght)都是返回1920*1050
方法：screen.availWidth;screen.availHeight;

2.colorDepth属性()

表示显示器的颜色深度
兼容：主浏览器都支持返回24，IE6/7/8返回32
方法：screen.colorDepth;

3.pixelDepth属性 与colorDepth属性一样，但IE6/7/8不支持

4.width 属性和 height 属性

描述：表示显示器屏幕的宽高
兼容：所有主要浏览器都支持,以1920*1080分辩率测试，chrome,IE,firefox全部返回1920*1080
方法：screen.width;screen.height;

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

四个方法
elementFromPoint()
getBoundingClientRect()
getClientRects()
scrollIntoView()

1.elementFromPoint()

描述：返回给定坐标处所在的元素。
兼容：不过位置坐标不太一样，浏览器还是有差异的
方法：document.elementFromPoint(100,100);

2.getBoundingClientRect()

描述：得到矩形元素的界线，返回的是一个对象，包含 top, left, right, 和 bottom四个属性值，大小都是相对于文档视图左上角计算而来
兼容：所有主要浏览器都支持
方法：element.getBoundingClientRect();

一般getBoundingClientRect方法用的多一点。我们可以很容易获取某个元素的偏移值。甚至高宽都能很轻松的计算出来。所以，你想用js获取元素的高宽尺寸，就可以试试getBoundingClientRect方法了。

3.getClientRects()

返回元素的数个矩形区域，返回的结果是个对象列表，具有数组特性。这里的矩形选区只针对inline box，因此，只针对a, span, em这类标签元素
兼容：IE6/7有bug，其他支持

4.scrollIntoView()

描述：让元素滚动到可视区域（不属于草案方法），类似锚点跳转功能页面定位
兼容：所有浏览器都兼容
方法：element.scrollIntoView();

四、元素视图属性(Element)

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

1. clientLeft 属性和 clientTop 属性

描述：表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。其兼容性不错,
兼容：所有浏览器都支持，但当元素是按钮button标签时：IE浏览器下，弹出的大小为3，在Chrome浏览器及FireFox浏览器下则是2，这是IE浏览器的按钮button标签在我的系统下的有3像素大小的边框值，而Chrome,FireFox的边框大小只有2像素。

方法：object.clientLeft;object.clientTop

2. clientWidth 属性和 clientHeight 属性

描述：表示内容区域的高度和宽度，包括padding大小，但是不包括边框和滚动条
兼容：所有浏览器都兼容,以1920*1080分辩率测试(最外层设度高为width:100%;height:100%;),现代浏览器有滚动条的情况下是宽度1903,IE6/7/8是1899，无滚动条宽度是1920

方法：object.clientWidth;object.clientHeight;

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。
兼容：不理想

五、鼠标位置(event对象)

与鼠标事件（例如普通的单击）相关的些属性。有：
clientX 属性和 clientY属性
offsetX 属性和 offsetY属性
pageX 属性和 pageY属性
screenX 属性和 screenY属性
x 属性和 y属性

1.clientX 属性和 clientY属性
描述：相对于window，为鼠标相对于window的偏移,不包括滚动条
兼容：所有浏览器都兼容

2.offsetX 属性和 offsetY属性
描述：表示鼠标相对于当前被点击元素padding box的左上偏移值，
兼容：各个浏览器的兼容性五花八门

3. pageX, pageY
描述：为鼠标相对于document的坐标。包括滚动条的偏移
兼容：IE6~IE8浏览器是不支持的

4. screenX, screenY
描述：鼠标相对于显示器屏幕的偏移坐标。
兼容：所有浏览器都兼容

参考网址：http://www.zhangxinxu.com/wordpress/?p=1907