淺談腳本化css（二）

查詢計算樣式

window上面有一個方法叫作getComputedStyle能夠來獲取元素的計算樣式，也就是css樣式。

 1 window.getComputedStyle(ele. null);

JavaScript; 「複製代碼」); 「查看純文本代碼」); 「返回代碼高亮」)

這裏的樣式是取優先級最高的，不僅是行間樣式，全部的只要是表現出來的樣式均可以獲取出來。

同時，返回的計算樣式的值都是絕對值，沒有相對單位。

咱們寫的">這個方法有兩個參數，第一個參數是咱們要獲取的元素。

第二個參數是一個字符串，表明咱們是否要獲取這個元素上面的某一個僞元素，若是不的話，就填寫null，不然就填寫要獲取的這個元素的哪個僞元素。

1  div:after{
2         width: 100px;
3         height; 100px;
4         background-color: red;
5   }
6   window.getComputedStyle(div, ‘after’).width= 100px；

 

CSS; 「複製代碼」); 「查看純文本代碼」); 「返回代碼高亮」)

可是很遺憾的是IE8以及如下的版本不兼容這個方法。

IE8有一個特殊的樣式currentStyle。

dom.currentStyle也會返回一個樣式表，和上面的基本同樣，惟一的區別在於返回的計算樣式的值不是通過轉換的絕對值，而是咱們寫什麼值就會返回什麼值。

如今有了這些方法和屬性，咱們就能夠封裝一個兼容性的獲取樣式的函數了。

1   function getStyle(obj, prop, fake) {
2       var fake = fake || null;
3       if(obj.currentStyle) {
4           return obj.currentStyle[prop];
5       }else {
6           return window.getComputedStyle(obj, fake)[prop];
7       }
8   }

 

JavaScript; 「複製代碼」); 「查看純文本代碼」); 「返回代碼高亮」)

• 腳本化樣式表

在document上有一個屬性叫作styleSheets，這個屬性儲存了一個html文檔全部的css樣式表的集合，咱們能夠來操做style標籤，不過在實際中基本是用不到的，因此這裏就不過多介紹了。