重學前端是程劭非(winter)【前手機淘寶前端負責人】在極客時間開的一個專欄, 天天10分鐘,重構你的前端知識體系,筆者主要整理學習過程的一些要點筆記以及感悟,完整的能夠加入winter的專欄學習【原文有winter的語音】,若有侵權請聯繫我,郵箱:kaimo313@foxmail.com。
CSSOM 是 CSS 的對象模型,在 W3C 標準中,它包含兩個部分:描述樣式表和規則等 CSS 的模型部分(CSSOM),和跟元素視圖相關的 View 部分(CSSOM View)。
用 style 標籤和 link 標籤建立樣式表
<style title="Hello"> a { color:red; } </style> <link rel="stylesheet" title="x" href="data:text/css,p%7Bcolor:blue%7D">
// 獲取文檔中全部的樣式表 document.styleSheets
// 雖然沒法用 CSSOM API 來建立樣式表,可是能夠修改樣式表中的內容 document.styleSheets[0].insertRule("p { color:pink; }", 0) document.styleSheets[0].removeRule(0)
// 獲取樣式表中特定的規則(Rule),(使用它的 cssRules 屬性來實現) document.styleSheets[0].cssRules
selectorText 和 style,分別表示一個規則的選擇器部分和樣式部分。
一、selector 部分:是一個字符串,按照選擇器語法設置便可。css
二、style 部分:是一個樣式表,它跟元素的 style 屬性是同樣的類型,因此能夠像修改內聯樣式同樣,直接改變屬性修改規則中的具體 CSS 屬性定義,也能夠使用 cssText 這樣的工具屬性。html
// 獲取一個元素最終通過 CSS 計算獲得的屬性的方法 window.getComputedStyle(elt, pseudoElt);
CSSOM View
這一部分的API
,能夠視爲DOM API
的擴展,它在本來的Element 接口
上,添加了顯示相關的功能,能夠分紅三個部分:窗口部分,滾動部分和佈局部分
。
用於操做瀏覽器窗口的位置、尺寸等。
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" )
可視區域(視口)滾動行爲由 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){ //...... })
在 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){ //...... })
有些元素可能產生多個盒,事實上,只有盒有寬和高,元素是沒有的。
一、獲取寬高的對象應該是盒
函數
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