酒濃碼濃 - CSSOM

CSSOM

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.

CSSOM:css的對象模型。

文檔:W3C文檔 ,MDN

document.styleSheets

document 的 styleSheets 屬性表示文檔中的所有樣式表,這是一個只讀的列表,我們可以用方括號運算符下標訪問樣式表,也可以使用 item 方法來訪問,它有 length 屬性表示文檔中的樣式表數量。

css有很多rule,最常用的爲 CSSStyleRule。有兩個屬性:selectorText 和 style,分別表示一個規則的選擇器部分和樣式部分。

selector 部分是一個字符串,這裏顯然偷懶了沒有設計進一步的選擇器模型,我們按照選擇器語法設置即可。style 部分是一個樣式表,它跟我們元素的 style 屬性是一樣的類型,所以我們可以像修改內聯樣式一樣,直接改變屬性修改規則中的具體 CSS 屬性定義,也可以使用 cssText 這樣的工具屬性

document.styleSheets[0].cssRules

此外,CSSOM 還提供了一個非常重要的方法,來獲取一個元素最終經過 CSS 計算得到的屬性:

第一個參數就是我們要獲取屬性的元素,第二個參數是可選的,用於選擇僞元素

window.getComputedStyle(elt, pseudoElt);

 

CSSOM還有跟元素視圖相關的 View 部分(CSSOM View

比較有用兼容也蠻好的方法:

getClientRects();

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

getBoundingClientRect()。

getBoundingClientRect ,這個 API 的設計更接近我們腦海中的元素盒的概念,它返回元素對應的所有盒的包裹的矩形區域,需要注意,這個 API 獲取的區域會包括當 overflow 爲 visible 時的子元素區域。

基礎API信息如下:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章