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，預留給之後標準使用