CSSOM视图模式(CSSOM View Module)

转自：http://www.zhangxinxu.com/wordpress/?p=1907

本文中介绍的元素具有很好的兼容性，可直接使用。

一、Window视图属性

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

innerWidth 

属性和 

innerHeight

 属性

pageXOffset 

属性和 

pageYOffset 

属性

screenX 

属性和 

screenY 

属性

outerWidth 

属性和 

outerHeight 

属性
1. innerWidth 属性和innerHeight 属性
例如

innerWidth

表示获取window窗体的内部宽度，不包括用户界面元素，比如窗框
2.

pageXOffset 

属性和 

pageYOffset 

属性

整个页面滚动的像素值。pageXOffset:x方向滚动的像素值，pageYOffset:y方向滚动的像素值
3.

screenX 

属性和 

screenY 

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

outerWidth 

属性和 

outerHeight 

属性

outerWidth 

属性和 

outerHeight

表示整个浏览器任务栏的大小，包括任务栏等。

二、元素视图属性

关于元素大小位置等信息的一些属性。有：

clientLeft

和

clientTop

clientWidth

和

clientHeight

offsetLeft

和

offsetTop

offsetParent

offsetWidth

和

offsetHeight

scrollLeft

和

scrollTop

scrollWidth

和

scrollHeight

1.clientLeft

和

clientTop

表示内容区域左上角相对于整个元素左上角的位置(包含边框),在一定程度上相对于上边框高度，左边框高度

2.clientWidth和clientHeight
表示内容区域的宽度与高度(包含padding，不包含边框和滚动条)
3.offsetLeft和offsetTop
表示内容区域左上角偏离最近的已定位父元素的位置（已定位是指position:[relative,fix,absolute]）
4.offsetParent
表示已定位父元素，第一个祖定位元素（即用来计算上面的

offsetLeft

和

offsetTop

的元素）
5.offsetWidth和offsetHeight
表示元素内容的宽度和高度(包括padding和border)
6.scrollTop和scrollLeft
表示元素滚动的像素大小。可读可写。
7.scrollWidth和scrollHeight
表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于

clientWidth

和

clientHeight

。当你向下滚动滚动条的时候，

scrollHeight

应该等用于

scrollTop
+ clientHeight

。

三、鼠标位置(Mouse position)

与鼠标事件（例如普通的单击）相关的些属性。这个东西基本上JavaScript一些必修书籍（例如《JavaScript高级程序设计》）上都有介绍。这里我就简单展示下兼容性和一些必要的文字介绍。
相关的些属性有：

clientX,clientY

offsetX, offsetY

pageX, pageY

screenX, screenY

x, y

下面只介绍几个兼容性很好的例子
1.clientX和clientY
相对于window的偏移
2.screenX和screenY
鼠标相对于显示器屏幕的偏移坐标。