重學前端學習筆記(二十六)--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 ViewElement 類添加了兩個方法: 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
相關文章
相關標籤/搜索