CSSOM

1. css样式表模型（cssom的本体）

document.styleSheets

这样可以获取样式表列表

每个样式表都是一堆的css规则（cssRules和rules是一样的）

而每一条rule可能是以下其中一种类型

• CSSStyleRule（最为常见）
• CSSCharsetRule
• CSSImportRule
• CSSMediaRule
• CSSFontFaceRule
• CSSPageRule
• CSSNamespaceRule
• CSSKeyframesRule
• CSSKeyframeRule
• CSSSupportsRule

 那CSSStyleRule为例，展开：

最重要的就是cssText、selectorText、style[0]

2.cssom view

CSSOM View 这一部分的 API，可以视为 DOM API 的扩展

窗口部分

有resizeTo、resizeBy、moveTo、moveBy方法，这些方法只能对window.open出来的窗口有作用（示例），而且不适用于移动端浏览器

还规定了window.open的第3个参数：

window.open("about:blank", "_blank" ,"width=100,height=100,left=100,right=100" )

 

滚动部分

视口

scrollX、scrollY：表示视口 X、Y 方向上的当前滚动距离（修改不会改变实际滚动效果）

scrollTo、scrollBy：使得页面滚动（使用后会影响scrollX、scrollY（前提是它们没有被js修改过））

值得注意的是，如果想监听整个页面的滚动，只能是对document对象来监听：

document.addEventListener("scroll", function(event){
    // ...
})

而不能对document.documentElement或者是document.body进行监听，这是无效的

元素

scrollLeft、scrollTop：表示元素 X、Y 方向上的当前滚动距离（和视口的scrollX、scrollY一个意思，但是修改会产生实际滚动效果）

scrollWidth、scrollHeight：表示元素内部的滚动内容的宽度、高度

scroll(x, y)、scrollBy(x, y)：使得元素滚动（和视口的scrollTo、scrollBy一个意思）

scrollIntoView(arg) : 父元素滚动到可以看到当前元素的状态（详情）

 

布局部分

innerWidth、innerHeight：视口大小

outerWidth、outerHeight：浏览器大小

devicePixelRatio：物理像素和 CSS 像素单位的倍率关系，Retina 屏这个值是 2，后来也出现了一些 3 倍的 Android 屏

screen.width、screen.height：设备屏幕大小

screen.availWidth、screen.availHeight：设备屏幕可以渲染的大小（例如windows桌面最下面有任务栏，所以availHeight=总屏幕高-任务栏高）

screen.colorDepth、screen.pixelDepth：都是固定24，预留给以后标准使用