CSSOM视图模式(CSSOM View Module)_viev1视图是什么-CSDN博客

本文详细介绍了网页视图属性和元素视图属性，包括Window视图属性如innerWidth、innerHeight、pageXOffset、pageYOffset等，以及与鼠标事件相关的属性如clientX、clientY、screenX、screenY等。文章强调了这些属性的兼容性与应用实例，旨在帮助开发者更好地理解和利用这些属性进行网页开发。

转自：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

鼠标相对于显示器屏幕的偏移坐标。