重學前端學習筆記（二十六）--CSSOM

時間 2019-12-05

標籤前端學習筆記二十六 cssom 简体版

原文原文鏈接

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，天天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的能夠加入winter的專欄學習【原文有winter的語音】，若有侵權請聯繫我，郵箱：kaimo313@foxmail.com。

1、介紹

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

2、CSSOM

2.一、建立樣式表

用 style 標籤和 link 標籤建立樣式表

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

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.三、CSSStyleRule 的兩個屬性

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

一、selector 部分：是一個字符串，按照選擇器語法設置便可。css

二、style 部分：是一個樣式表，它跟元素的 style 屬性是同樣的類型，因此能夠像修改內聯樣式同樣，直接改變屬性修改規則中的具體 CSS 屬性定義，也能夠使用 cssText 這樣的工具屬性。html

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

3、CSSOM View

CSSOM View 這一部分的 API，能夠視爲 DOM API 的擴展，它在本來的 Element 接口上，添加了顯示相關的功能，能夠分紅三個部分： 窗口部分，滾動部分和佈局部分。

3.一、窗口 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.二、滾動 API

一、視口滾動 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){
  //......
})

二、元素滾動 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.三、佈局 API

一、全局尺寸信息

二、元素的佈局信息

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

一、獲取寬高的對象應該是盒函數

CSSOM View 爲 Element 類添加了兩個方法： getClientRects()和getBoundingClientRect()。

getClientRects：會返回一個列表，裏面包含元素對應的每個盒所佔據的客戶端矩形區域，這裏每個矩形區域能夠用 x, y, width, height 來獲取它的位置和尺寸。工具

getBoundingClientRect：返回元素對應的全部盒的包裹的矩形區域，須要注意，這個 API 獲取的區域會包括當 overflow 爲 visible 時的子元素區域。佈局

我的總結

最後面兩個API兼容性很是好，定義又很是清晰。實現視覺效果超級棒。。。學習

// 你們能夠試一試在控制檯輸出下面3個
document.documentElement
// >>> <html>...</html>

document.documentElement.getClientRects()
// >>> DOMRectList

document.documentElement.getBoundingClientRect()
// >>> DOMRect

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。