重學前端 26 # CSSOM

說明

每天10分鐘，重構你的前端知識體系專欄筆記。

一、介紹

CSSOM 是 CSS 的對象模型，在 W3C 标準中，它包含兩個部分：描述樣式表和規則等 CSS 的模型部分（CSSOM），和跟元素視圖相關的 View 部分（CSSOM View）。

二、CSSOM

2.1、建立樣式表

用 style 标簽和 link 标簽建立樣式表

<style title="Hello">a {
  color:red;
}</style>
<link rel="stylesheet" title="x" href="data:text/css,p%7Bcolor:blue%7D">      

2.2、CSSOM API 的基本用法

// 擷取文檔中所有的樣式表
document.styleSheets      

// 雖然無法用 CSSOM API 來建立樣式表，但是可以修改樣式表中的内容
document.styleSheets[0].insertRule("p { color:pink; }", 0)
document.styleSheets[0].removeRule(0)      

// 擷取樣式表中特定的規則（Rule），(使用它的 cssRules 屬性來實作)
document.styleSheets[0].cssRules      

2.3、CSSStyleRule 的兩個屬性

selectorText 和 style，分别表示一個規則的選擇器部分和樣式部分。

1、selector 部分：是一個字元串，按照選擇器文法設定即可。

2、style 部分：是一個樣式表，它跟元素的 style 屬性是一樣的類型，是以可以像修改内聯樣式一樣，直接改變屬性修改規則中的具體 CSS 屬性定義，也可以使用 cssText 這樣的工具屬性。

// 擷取一個元素最終經過 CSS 計算得到的屬性的方法
window.getComputedStyle(elt, pseudoElt);      

三、CSSOM View

​

​CSSOM View​

​​ 這一部分的 ​

​API​

​​，可以視為 ​

​DOM API​

​​ 的擴充，它在原本的 ​

​Element 接口​

​​上，添加了顯示相關的功能，可以分成三個部分：​

​視窗部分，滾動部分和布局部分​

​。

3.1、視窗 API

用于操作浏覽器視窗的位置、尺寸等。

• ​

  ​moveTo(x, y)​

  ​：視窗移動到螢幕的特定坐标
• ​

  ​moveBy(x, y)​

  ​：視窗移動特定距離
• ​

  ​resizeTo(x, y)​

  ​：改變視窗大小到特定尺寸
• ​

  ​resizeBy(x, y)​

  ​：改變視窗大小特定尺寸

// 視窗 API 還規定了 window.open() 的第三個參數：
window.open("about:blank", "_blank" ,"width=100,height=100,left=100,right=100" )      

3.2、滾動 API

1、視口滾動 API

可視區域（視口）滾動行為由 window 對象上的一組 API 控制

• ​

  ​scrollX​

  ​​：是視口的屬性，表示 X 方向上的目前滾動距離，有别名​

  ​pageXOffset​

  ​
• ​

  ​scrollY​

  ​​：是視口的屬性，表示 Y 方向上的目前滾動距離，有别名​

  ​pageYOffset​

  ​
• ​

  ​scroll(x, y)​

  ​​：使得頁面滾動到特定的位置，有别名​

  ​scrollTo​

  ​​，支援傳入配置型參數​

  ​{top, left}​

  ​
• ​

  ​scrollBy(x, y)​

  ​​：使得頁面滾動特定的距離，支援傳入配置型參數​

  ​{top, left}​

  ​

通過這些屬性和方法，可以讀取視口的滾動位置和操縱視口滾動。

// 監聽視口滾動事件，需要在 document 對象上綁定事件監聽函數
document.addEventListener("scroll", function(event){
  //......
})      

2、元素滾動 API

在 Element 類，為了支援滾動，加入了以下 API。

• ​

  ​scrollTop​

  ​：元素的屬性，表示 Y 方向上的目前滾動距離。
• ​

  ​scrollLeft​

  ​：元素的屬性，表示 X 方向上的目前滾動距離。
• ​

  ​scrollWidth​

  ​：元素的屬性，表示元素内部的滾動内容的寬度，一般來說會大于等于元素寬度。
• ​

  ​scrollHeight​

  ​：元素的屬性，表示元素内部的滾動内容的高度，一般來說會大于等于元素高度。
• ​

  ​scroll(x, y)​

  ​​：使得元素滾動到特定的位置，有别名​

  ​scrollTo​

  ​​，支援傳入配置型參數​

  ​{top, left}​

  ​。
• ​

  ​scrollBy(x, y)​

  ​​：使得元素滾動到特定的位置，支援傳入配置型參數​

  ​{top, left}​

  ​。
• ​

  ​scrollIntoView(arg)​

  ​​：滾動元素所在的父元素，使得元素滾動到可見區域，可以通過​

  ​arg​

  ​ 來指定滾到中間、開始或者就近。

// 可滾動的元素也支援 scroll 事件，在元素上監聽它的事件即可
element.addEventListener("scroll", function(event){
  //......
})      

3.3、布局 API

1、全局尺寸資訊

2、元素的布局資訊

有些元素可能産生多個盒，事實上，隻有盒有寬和高，元素是沒有的。

1、擷取寬高的對象應該是​

​盒​

​

​

​CSSOM View​

​​ 為 ​

​Element 類​

​​添加了兩個方法：​

​getClientRects()和getBoundingClientRect()。​

​