国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

antz / 1032人閱讀

摘要：筆記說明重學前端是程劭非前手機淘寶前端負責人在極客時間開的一個專欄，每天分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入的專欄學習原文有的語音，如有侵權請聯系我，郵箱。

筆記說明 
重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kaimo313@foxmail.com。
一、介紹 
CSSOM 是 CSS 的對象模型，在 W3C 標準中，它包含兩個部分：描述樣式表和規則等 CSS 的模型部分（CSSOM），和跟元素視圖相關的 View 部分（CSSOM View）。
二、CSSOM 2.1、創建樣式表 
用 style 標簽和 link 標簽創建樣式表
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()。

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

getBoundingClientRect：返回元素對應的所有盒的包裹的矩形區域，需要注意，這個 API 獲取的區域會包括當 overflow 為 visible 時的子元素區域。

個人總結

最后面兩個API兼容性非常好，定義又非常清晰。實現視覺效果超級棒。。。

// 大家可以試一試在控制臺輸出下面3個
document.documentElement
// >>> ...

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114734.html

相關文章

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

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

    wemall 評論0 收藏0

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

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

    liuyix 評論0 收藏0

  • 重學前端學習筆記（二十七）--JavaScript的詞法

    摘要：模板語法四種詞法定義二空白符號空白符號分類或稱是，是縮進符，字符串中寫的。注意換行符會影響的兩個重要語法特性自動插入分號和規則。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱...

    jayzou 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<