好记性不如烂键盘，CSSOM View Module整理

看了鑫神的文章DOM基础小测27期答疑文字版-窗体滚动二三事后，把之前整理的笔记和鑫神最新的精讲整合一下，方便以后使用。

CSSOM

---

CSS object model是一组允许从JavaScript操作CSS的api。它很像DOM，但用于CSS而不是HTML。它允许用户动态地读取和修改CSS样式。

Screen视图属性

---

Screen视图表示显示器的信息，通常是呈现当前窗口的屏幕（浏览器窗口中心所在的屏幕为当前屏幕）。使用window.screen或screen获取。

width / height

返回显示器的宽/高

availWidth / availHeight

返回显示器可用宽/高，不包括底部（默认）的任务栏等。

colorDepth

返回显示器的颜色深度。

pixelDepth

在非Unix系统下，和colorDepth是一样的。

IE8+

• 支持：返回显示器的像素深度；
• 不支持：返回undefined。

Window视图属性

---

window视图属性是关于浏览器窗口的属性，被称为Screenview接口。

window分为窗口和窗体：

• 窗口：显示网页内容的区域；
• 窗体：工具条，标题栏，窗口。

innerWidth / innerHeight

浏览器窗口的宽度/高度。

IE8+

• 支持：返回视窗宽度/视窗高度
• 不支持：返回undefined。

outerWidth / outerHeight

浏览器窗体宽度/高度。

IE8+

• 支持：返回窗体宽度/窗体高度
• 不支持：返回undefined。

pageXOffset / pageYOffset

窗口内整个页面的水平/垂直滚动距离。

IE8+

• 支持：返回水平/垂直滚动距离
• 不支持：返回undefined。

screenX / screenY

浏览器窗体在显示器中的水平/垂直位置。

IE8+，非Opera

• 支持：返回窗体在显示器中的水平/垂直
• 不支持：返回undefined。

Element视图属性

---

offsetWidth / offsetHeight

返回整个元素（content+padding+border）的宽/高。

document.documentElement和普通的元素不同，它的offsetHeihgt是包含浏览器滚动高度的完整高度的，等同于scrollHeihgt。

offsetLeft / offsetTop

返回相对于最近的祖先定位元素（position属性为relative，absolute或fixed）的位置。

offsetParent

返回当前元素的上一级定位元素，即用来计算当前元素offsetLeft/offsetTop的参考元素。如果没有定位元素，则返回最近的td
、th，table或body。

IE8+，非Opera

• 支持：返回上一级定位元素；
• 不支持：返回null。

clientWidth / clientHeight

返回元素内容区域（content+padding，不包括滚动条）的宽/高。

document.documentElement和普通的元素不同，他是无视html元素有没有边框的，clientWidth/clientHeight直接等于窗口的实际宽/高。

clientLeft / clientTop

返回元素内容区域（content+padding）相对于元素的左上角的位置。
也可以理解为clientLeft就是border-left的宽度，clientTop就是border-top的宽度。

scrollWidth / scrollHeight

返回整个内容区域的宽/高，包括隐藏的部分。如果没有隐藏部分就相当于是clientWidth/clientHeight。
如果有垂直滚动条，当把滚动条拖到最底部的时候，clientHeight+scrollTop=scrollHeight。

scrollTop / scrollLeft

返回元素滚动的距离。

可写

Document视图和Element视图方法

---

elementFromPoint( )

document.elementFromPotin( 150, 150 );

返回给定坐标处的所在的元素。
这个方法可以用来检测元素是否重叠或者碰撞。

getBoundingClientRect( )

element.getBoundingClientRect();

返回一个包含元素距离文档视图（一般是窗口）左上角的位置信息的对象（包含top，right，bottom，left四个属性）。

getClientRects( )

element.getClientRects()

返回一个包含元素内所有内联元素盒子距离文档视图左上角的位置信息的对象数组。

如果是块级元素，则和getBoundingClientRect方法一样；如果是内联元素，文字有几行就会分成几个内联元素盒子。

scrollIntoView( )

element.scrollIntoView()

让元素滚动到可视区域。配合scroll-behavior食用更佳。

鼠标位置

---

clientX / clientY

鼠标相对于窗口的位置。

offsetX / offsetY

鼠标相对于被点击元素的padding box左上角的位置

兼容很苦涩，每个浏览器都有不同

pageX / pageY

鼠标相对于文档的坐标。

在iphone中，这个属性相当于clientX和clientY。

IE8+

• 支持：返回相对于文档的坐标；
• 不支持：返回undefined。

screenX / screenY

鼠标相对于显示器的位置。

在iphone中，这个属性相当于pageX和pageY。

x / y

相当于clientX/clientY

参考

---

CSSOM视图模式(CSSOM View Module)相关整理

MDN-CSS Object Model (CSSOM)