第一百一十六節，JavaScript，DOM操做樣式

時間 2019-11-12

標籤第一百一十六 javascript dom 做樣欄目 JavaScript 简体版

原文原文鏈接

JavaScript，DOM操做樣式css

一．操做樣式html

CSS做爲(X)HTML的輔助，能夠加強頁面的顯示效果。但不是每一個瀏覽器都能支持最新的CSS能力。CSS的能力和DOM級別密切相關，因此咱們有必要檢測當前瀏覽器支持CSS能力的級別。編程

DOM1級實現了最基本的文檔處理，DOM2和DOM3在這個基礎上增長了更多的交互能力，這裏咱們主要探討CSS，DOM2增長了CSS編程訪問方式和改變CSS樣式信息。數組

DOM一致性檢測瀏覽器

功能服務器	版本號異步	說明函數
Core測試	1.0、2.0、3.0字體	基本的DOM,用於表現文檔節點樹
XML	1.0、2.0、3.0	Core的XML擴展，添加了對CDATA等支持
HTML	1.0、2.0	XML的HTML擴展，添加了對HTML特有元素支持
Views	2.0	基於某些樣式完成文檔的格式化
StyleSheets	2.0	將樣式表關聯到文檔
CSS	2.0	對層疊樣式表1級的支持
CSS2	2.0	對層疊樣式表2級的支持
Events	2.0	常規的DOM事件
UIEvents	2.0	用戶界面事件
MouseEvents	2.0	由鼠標引起的事件(如：click)
MutationEvents	2.0	DOM樹變化時引起的事件
HTMLEvents	2.0	HTML4.01事件
Range	2.0	用於操做DOM樹中某個範圍的對象和方法
Traversal	2.0	遍歷DOM樹的方法
LS	3.0	文件與DOM樹之間的同步加載和保存
LS-Async	3.0	文件與DOM樹之間的異步加載和保存
Valuidation	3.0	在確保有效的前提下修改DOM樹的方法

implementation對象的hasFeature()方法

hasFeature()方法檢測瀏覽器是否支持DOM1級CSS能力或DOM2級CSS能力，參數第一個css級別，參數二css版本，返回布爾值，IE上不精確
使用方式：
document.implementation.hasFeature('css級別', 'css版本')

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //檢測瀏覽器是否支持DOM1級CSS能力或DOM2級CSS能力
    alert('DOM1級CSS能力：' + document.implementation.hasFeature('CSS', '2.0'));
    alert('DOM2級CSS能力：' + document.implementation.hasFeature('CSS2', '2.0'));
};

PS：這種檢測方案在IE瀏覽器上不精確，IE6中，hasFeature()方法只爲HTML和版本1.0返回true，其餘全部功能均返回false。但IE瀏覽器仍是支持最經常使用的CSS2模塊。

1.訪問元素的樣式,獲取行內樣式

CSS屬性及JavaScript調用

任何HTML元素標籤都會有一個通用的屬性：style。它會返回CSSStypeDeclaration對象。下面咱們看幾個最多見的行內style樣式的訪問方式。

CSS屬性及JavaScript調用

CSS屬性	JavaScript調用
color	style.color
font-size	style.fontSize
float	非IE：style.cssFloat
float	IE：style.styleFloat

style屬性，獲取元素節點的行內style樣式，也就是行內css樣式，返回樣式的集合

style屬性，獲取到樣式集合後，可使用樣式屬性名稱獲取或設置屬性值
使用方式：
目標節點.style

//<div id="box" style="color: #ff2217; background: #fff137; font-size: 20px; float: right;">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box');  //經過ID獲取到目標節點
    alert(yshi.style); //style屬性，獲取元素節點的行內style樣式，也就是行內css樣式，返回樣式的集合
    //返回：[object CSS2Properties] 樣式集合

    //經過樣式屬性名稱，獲取屬性值
    alert(yshi.style.color);  //查看color顏色屬性值
    //返回;rgb(255, 34, 23) 瀏覽器計算過的顏色屬性值

    alert(yshi.style.background); //查看背景顏色屬性值
    //返回;#fff137   瀏覽器計算過的顏色屬性值

    alert(yshi.style.fontSize);  //查看字體大小屬性值
    //注意：屬性名稱單詞若是是兩段或者三段的，如：font-size，在寫屬性名稱時將(-)分隔符去掉，分隔符後面的第一個字母大寫，如：fontSize
    //返回：20px

    //alert(yshi.style.float);  //查看浮動屬性值，
    //注意：float 是js的保留字，若是遇到關鍵字或保留字，在屬性名稱前加小寫的css,而後將屬性名稱第一個字母大寫，以下
    //alert(yshi.style.cssFloat); //查看浮動屬性值，
    //可是cssFloat    IE瀏覽器不支持，IE能夠將前面的css換成style，如：styleFloat
    //alert(yshi.style.styleFloat);
    //可是styleFloat   除了IE外其餘瀏覽器也不支持
    //因此咱們須要作一個兼容
    //作一個邏輯或，第一個不支持，就會用第二個
    alert(yshi.style.cssFloat || yshi.style.styleFloat);    //非IE用cssFloat，IE用styleFloat
    
};

以上取值方式也能夠賦值，最後一種賦值能夠以下：

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box');  //經過ID獲取到目標節點
    //三元運算，判斷若是瀏覽器支持cssFloat就用cssFloat，若是不支持就用styleFloat
    typeof yshi.style.cssFloat != 'undefined' ? yshi.style.cssFloat = 'right' : yshi.style.styleFloat = 'right';
};

DOM2級樣式規範爲style定義了一些屬性和方法

屬性或方法	說明
cssText	訪問或設置style中的CSS代碼
length	CSS屬性的數量
parentRule	CSS信息的CSSRule對象
getPropertyCSSValue(name)	返回包含給定屬性值的CSSValue對象
getPropertyPriority(name)	若是設置了!important，則返回，不然返回空字符串
item(index)	返回指定位置CSS屬性名稱
removeProperty(name)	從樣式中刪除指定屬性
setProperty(name,v,p)	給屬性設置爲相應的值，並加上優先權

cssText屬性，獲取行內style樣式裏的全部css代碼
使用方式：
目標節點.style.cssText

//<div id="box" style="color: #ff2217; background: #fff137; font-size: 20px; float: right;">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box');  //經過ID獲取到目標節點
    //cssText屬性，獲取行內style樣式裏的因此css代碼
    alert(yshi.style.cssText); //獲取行內style樣式裏的因此css代碼
    //返回;color: rgb(255, 34, 23); background: rgb(255, 241, 55) none repeat scroll 0% 0%; font-size: 20px; float: right;
};

length屬性，獲取行內style樣式裏的屬性長度，也就是有多少個樣式，IE不支持
使用方式：
目標節點.style.length

//<div id="box" style="color: #ff2217; background: #fff137; font-size: 20px; float: right;">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box');  //經過ID獲取到目標節點
    //length屬性，獲取行內style樣式裏的屬性長度，也就是有多少個樣式，IE不支持
    alert(yshi.style.length); //獲取行內style樣式裏的屬性長度
    //返回：12  不是很準確，沒什麼用
};

removeProperty()方法，移除行內style樣式裏的某個css屬性，參數是要移除的樣式屬性名稱，IE不支持
使用方式：
目標節點.style.removeProperty('要移除的樣式屬性名稱')

//<div id="box" style="color: #ff2217; background: #fff137; font-size: 20px; float: right;">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box');  //經過ID獲取到目標節點
    //removeProperty()方法，移除行內style樣式裏的css屬性，參數是要移除的樣式屬性名稱，IE不支持
    yshi.style.removeProperty('color'); //移除行內style樣式裏的css屬性
};

setProperty()方法，設置行內style樣式裏的某個css屬性，參數一屬性名稱，參數二屬性值，IE不支持
使用方式：
目標節點.style.removeProperty('屬性名稱','屬性值')

//<div id="box" style="color: #ff2217; background: #fff137; font-size: 20px; float: right;">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box');  //經過ID獲取到目標節點
    //setProperty()方法，設置行內style樣式裏的某個css屬性，參數一屬性名稱，參數二屬性值，IE不支持
    yshi.style.setProperty('color','#0078D7'); //設置行內style樣式裏的某個css屬性
};

PS：Firefox、Safari、Opera9+、Chrome支持這些屬性和方法。IE只支持cssText，而getPropertyCSSValue()方法只有Safari3+和Chrome支持。

PS：style屬性僅僅只能獲取行內的CSS樣式，對於另外兩種形式內聯<style>和連接<link>方式則沒法獲取到。

獲取瀏覽器計算後的樣式，缺點不能賦值

雖然能夠經過style來獲取單一值的CSS樣式，但對於複合值的樣式信息，就須要經過計算樣式來獲取。DOM2級樣式，window對象下提供了getComputedStyle()方法。接受兩個參數，須要計算的樣式元素，第二個僞類(:hover)，若是沒有沒有僞類，就填null。

getComputedStyle()方法方法，獲取瀏覽器計算後的樣式(設置樣式和默認樣式)，接受兩個參數，第一個目標元素節點，第二個僞類(:hover)也就是若是是a標籤，若是沒有沒有僞類，就填null。返回瀏覽器計算後的樣式對象.IE不支持
使用方式：
window.getComputedStyle(目標元素節點,僞類或null)

獲取到瀏覽器計算後的樣式對象後一樣能夠經過樣式屬性名稱來獲取屬性值

獲取樣式屬性值時的注意事項
注意：屬性名稱單詞若是是兩段或者三段的，如：font-size，在寫屬性名稱時將(-)分隔符去掉，分隔符後面的第一個字母大寫，如：fontSize
注意：float 是js的保留字，若是遇到關鍵字或保留字，在屬性名稱前加小寫的css,而後將屬性名稱第一個字母大寫，如：cssFloat
可是cssFloat IE瀏覽器不支持，IE能夠將前面的css換成style，如：styleFloat
可是styleFloat 除了IE外其餘瀏覽器也不支持
因此關鍵字保留字須要結合兩種作兼容

//<div id="box" style="color: #ff2217; background: #fff137; font-size: 20px; float: right;">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box');  //經過ID獲取到目標節點
    //getComputedStyle()方法方法，獲取瀏覽器計算後的樣式(設置樣式和默認樣式)，接受兩個參數，第一個目標元素節點，第二個僞類(:hover)也就是若是是a標籤，若是沒有沒有僞類，就填null。
    var style = window.getComputedStyle(yshi,null);  //獲取瀏覽器計算後的樣式(設置樣式和默認樣式)
    alert(style);  //查看瀏覽器計算後的樣式對象
    //返回;[object CSS2Properties]
    alert(style.alignSelf);  //一樣能夠經過屬性名稱來獲取或設置值
};

getComputedStyle()方法，IE不支持，但有個相似的屬性可使用currentStyle屬性

currentStyle屬性，獲取ie瀏覽器計算後的樣式(設置樣式和默認樣式)，返回瀏覽器計算後的樣式對象
使用方式：
目標元素節點.currentStyle
獲得計算後的樣式對象後能夠經過樣式屬性名稱來獲取值

//<div id="box" style="color: #ff2217; background: #fff137; font-size: 20px; float: right;">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box');  //經過ID獲取到目標節點
    //currentStyle屬性，獲取ie瀏覽器計算後的樣式(設置樣式和默認樣式)，返回瀏覽器計算後的樣式對象
    var style = yshi.currentStyle;  //獲取ie瀏覽器計算後的樣式
    alert(style); //查看返回對
    //經過樣式屬性名稱來獲取值
    alert(style .color);
};

用currentStyle，結合getComputedStyle()方法作一個兼容

//<div id="box" style="color: #ff2217; background: #fff137; font-size: 20px; float: right;">測試1</div>
window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box');  //經過ID獲取到目標節點

    //用currentStyle，結合getComputedStyle()方法作一個兼容
    var style = window.getComputedStyle ? window.getComputedStyle(yshi, null) : null || yshi.currentStyle;
    alert(style .color);                            //顏色在不一樣的瀏覽器會有rgb()格式
    alert(style .border);                            //不一樣瀏覽器不一樣的結果
    alert(style .fontFamily);                        //計算顯示覆合的樣式值
    alert(style.style.fontFamily);                    //空
};

PS：border屬性是一個綜合屬性，因此他在Chrome顯示了，Firefox爲空，IE爲undefined。所謂綜合性屬性，就是XHTML課程裏所的簡寫形式，因此，DOM在獲取CSS的時候，最好採用完整寫法兼容性最好，好比：border-top-color之類的。

注意：採用計算後的樣式獲取，不只僅能夠獲取瀏覽器默認樣式，還能夠獲取行內樣式、內聯和鏈接樣式，由於無論你在哪裏設置的css樣式，最終會駐留在瀏覽器的計算樣式裏

2.操做樣式表，內聯樣式和鏈接樣式

內聯樣式和鏈接樣式，經過id和class調用是最經常使用的方法。咱們能夠經過改變id或者class的值類改變樣式

經過改變id的值類改變樣式

【不推薦】把ID改變會帶來災難性的問題，好比id還關聯着js，改變id後就不關聯了

//<div id="box1">測試1</div>

// #box1{
//     color: #ff3226; 紅色
// }
// #box2{
//     color: #33ff38; 綠色
// }

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box1');  //經過ID獲取到目標節點
    //目前是紅色
    //經過改變id的值類改變樣式
    yshi.id = 'box2';
    //改變id後就是綠色了
};

className屬性，獲取或改變元素節點的class值

經過改變class的值類改變樣式

使用方式：

元素節點.className

//<div id="box1">測試1</div>

// .box1{
//     color: #ff3226; 紅色
// }
// .box2{
//     color: #33ff38; 綠色
// }

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box1');  //經過ID獲取到目標節點
    //目前是紅色
    //className屬性，獲取或改變元素節點的class值
    yshi.className = 'box2';
    //改變class值後就是綠色了
};

在添加className的時候，咱們想給一個元素添加多個class多個值，或者多個值裏刪除一個值都是須要重寫className的，爲了方便，咱們須要自定義可以給class追加值，和刪除值的函數

自定義class值的操做函數【推薦】

//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    var yshi = document.getElementById('box');  //經過ID獲取到目標節點
    addClass(yshi,'box2');  //添加class屬性值
    addClass(yshi,'box3');  //添加class屬性值
    removeClass(yshi,'box2');  //刪除一個class屬性值


    //判斷一個class屬性值是否存在函數
    function hasClass(element, className) {  //接收兩個參數，第一個目標元素節點，第二個要判斷的class屬性值
        //經過正則查找函數接收class屬性值.若是在元素節點class屬性值裏存在返回true,反之返回false
        return !!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
    }


    //添加一個class屬性值函數
    //給class屬性添加一個屬性值，若是不存在就添加，若是存在不作任何動做
    function addClass(element, className) {   //接收兩個參數，第一個目標元素節點，第二個要添加的class屬性值
        //將接收到的兩個參數傳入判斷函數裏，判斷要添加的class屬性值是否存在
        if (!hasClass(element, className)) {
            //不存在就添加此class屬性值
            element.className += " " + className;
        }
    }


    //刪除一個class屬性值函數
    //給class屬性刪除一個屬性值，若是存在就刪除，若是不存在不作任何動做
    function removeClass(element, className) {   //接收兩個參數，第一個目標元素節點，第二個要刪除的class屬性值
        //將接收到的兩個參數傳入判斷函數裏，判斷要刪除的class屬性值是否存在
        if (hasClass(element, className)) {
            //若是存在經過正則匹配到此屬性值，替換成一個空格
            element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');
        }
    }

};

獲取內聯樣式和鏈接樣式

查看是否支持DOM2級樣式表，IE異常，但也是支持DOM2級樣式表的

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    alert(document.implementation.hasFeature('StyleSheets', '2.0')); //查看是否支持DOM2級樣式表
    //返回布爾值
};

操做樣式表，首先獲取到樣式表標籤，鏈接樣式獲取到<link>節點，內聯樣式獲取到<style>標籤節點

//<link rel="stylesheet" type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //鏈接樣式
    var link = document.getElementsByTagName('link'); //鏈接樣式獲取到<link>節點
    alert(link);  //返回包含全部link標籤的數組
    //返回：[object HTMLCollection]  包含全部link標籤的數組
    alert(link[0]); //獲取第一個link標籤
    //返回：[object HTMLLinkElement]  第一個link標籤對象

    //內聯樣式
    var style = document.getElementsByTagName('style');  //內聯樣式獲取到<style>節點
    alert(style);  //返回包含全部<style>標籤的數組
    alert(style[0]); //獲取第一個style標籤

};

sheet屬性,獲得樣式標籤裏的css樣式表對象,非IE支持
使用方式：
樣式標籤節點.sheet

//<link rel="stylesheet" type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //鏈接樣式
    var link = document.getElementsByTagName('link')[0]; //鏈接樣式獲取到<link>節點
    alert(link.sheet);   //sheet屬性,獲得樣式標籤裏的css樣式表對象
    //返回;[object CSSStyleSheet]
};

styleSheet屬性,獲得樣式標籤裏的css樣式表對象,只支持IE，styleSheet還有別的獲取css樣式表對象方式，並且都兼容，下面會說到
使用方式：
樣式標籤節點.styleSheet

//<link rel="stylesheet" type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //鏈接樣式
    var link = document.getElementsByTagName('link')[0]; //鏈接樣式獲取到<link>節點
    alert(link.styleSheet);   //styleSheet屬性,獲得樣式標籤裏的css樣式表對象,只支持IE
    //返回;[object CSSStyleSheet]
};

結合上面二者狀況作一個兼容

//<link rel="stylesheet" type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //鏈接樣式
    var link = document.getElementsByTagName('link')[0]; //鏈接樣式獲取到<link>節點
    //若是sheet執行不成功，就執行styleSheet
    var sheet = link.sheet || link.styleSheet;  //作一個兼容
    alert(sheet); //返回:css樣式表對象
};

styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】，全部瀏覽器兼容
使用方式：不須要獲取樣式標籤節點就能直接獲取到樣式表對象
document.styleSheets

//<link rel="stylesheet" type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets; //獲取樣式表對象集合
    alert(style.length); //查看樣式表集合長度，也就是有幾個樣式表
    //返回：1 說明只有一個樣式表
};

樣式表對象的屬性和方法

屬性或方法	說明
disabled	獲取和設置樣式表是否被禁用
href	若是是經過<link>包含的，則樣式表爲URL，不然爲null
media	樣式表支持的全部媒體類型的集合
ownerNode	指向擁有當前樣式表節點的指針
parentStyleSheet	@import導入的狀況下，獲得父CSS對象
title	ownerNode中title屬性的值
type	樣式表類型字符串
cssRules	樣式表包含樣式規則的集合，IE不支持
ownerRule	@import導入的狀況下，指向表示導入的規則，IE不支持
deleteRule(index)	刪除cssRules集合中指定位置的規則，IE不支持
insertRule(rule, index)	向cssRules集合中指定位置插入rule字符串，IE不支持

樣式表對象的屬性和方法，首先要獲取到樣式表對象後使用

disabled屬性，獲取和設置樣式表是否被禁用，false沒有禁用，true被禁用
使用方式：
樣式表對象.disabled

//<link rel="stylesheet" type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象
    alert(style.disabled); //disabled屬性，獲取和設置樣式表是否被禁用，false沒有禁用，true被禁用
    //返回：false
    style.disabled = true;  //設置樣式表禁用
    alert(style.disabled);
};

href屬性，若是是經過<link>包含的，獲取樣式表的URL，不然爲null
使用方式：
樣式表對象.href

//<link rel="stylesheet" type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //href屬性，若是是經過<link>包含的，獲取樣式表的URL，不然爲null
    alert(style.href);
    //返回：http://localhost:63342/js/1.css

};

media屬性，獲取樣式表支持的全部媒體類型的集合，也就是<link media='xxx'>獲取link標籤裏的media屬性，返回集合，支持度很差
使用方式：
樣式表對象.media

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //media屬性，獲取樣式表支持的全部媒體類型的集合，也就是<link media='xxx'>獲取link標籤裏的media屬性,返回集合
    alert(style.media);
    alert(style.media[0]);    //第一個media的值

};

title屬性，獲取樣式錶鏈接的title，也就是<link title='xxx'>獲取link標籤裏的title屬性值，
使用方式：
樣式表對象.title

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //title屬性，獲取樣式錶鏈接的title，也就是<link title='xxx'>獲取link標籤裏的title屬性值，
    alert(style.title);
    //返回;xxx
};

cssRules屬性，獲取樣式表規則集合，也就是css代碼塊的集合，代碼塊就是一個選擇器，要能夠理解爲css選擇器集合,IE9如下不支持
使用方式：
樣式表對象.cssRules

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //cssRules屬性，獲取樣式表規則集合，也就是css代碼塊的集合，代碼塊就是一個選擇器，要能夠理解爲css選擇器集合
    alert(style.cssRules);
    //返回;[object CSSRuleList]  代碼塊集合
    alert(style.cssRules[0]); //獲取第一個代碼塊，也就是第一個選擇器
    //返回：[object CSSStyleRule]   第一個選擇器對象

    //cssText屬性能夠獲取到對象選擇器裏的樣式代碼，IE9如下不支持
    alert(style.cssRules[0].cssText);
    //返回：.box1 { color: rgb(255, 50, 38); }

    //selectorText屬性能夠獲取到對象選擇器的名稱，也就是選擇符，IE9如下不支持
    alert(style.cssRules[0].selectorText);
    //返回：.box1
};

deleteRule()方法，刪除樣式表對象裏的指定代碼塊，也就是選擇器，參數是要刪除第幾個選擇器，IE9如下不支持
使用方式：
樣式表對象.deleteRule(刪除第幾個選擇器)

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //deleteRule()方法，刪除樣式表對象裏的指定代碼塊，也就是選擇器，參數是要刪除第幾個選擇器
    style.deleteRule(0); //刪除樣式表對象裏的第一個選擇器
};

insertRule()方法，向樣式表對象裏添加一條規則，也就是添加一個選擇器，兩個參數，第一個要添加的選擇器、名稱{加樣式}，第二個參數要添加的位置，IE9如下不支持
使用方式：
樣式表對象.insertRule('選擇器名稱{加樣式}',添加的位置)

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //insertRule()方法，向樣式表對象裏添加一條規則，也就是添加一個選擇器，兩個參數，第一個要添加的選擇器、名稱{加樣式}，第二個參數要添加的位置
    style.insertRule(".box3{color: #33ff38}",0); //向樣式表對象裏添加一條規則
};

注意：以上講到的IE9如下不支持，IE有替代

PS：除了幾個不用和IE不支持的咱們忽略了，還有三個有IE對應的另外一種方式：支持IE的

rules屬性，IE用於替代cssRules屬性，獲取樣式表規則集合，也就是css代碼塊的集合，代碼塊就是一個選擇器，要能夠理解爲css選擇器集合，非IE不支持
使用方式：
樣式表對象.rules

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //rules屬性，IE用於替代cssRules屬性，獲取樣式表規則集合，也就是css代碼塊的集合，代碼塊就是一個選擇器，要能夠理解爲css選擇器集合，非IE不支持
    alert(style.rules);  //獲取css選擇器集合
};

removeRule()方法，IE用於替代deleteRule()方法，刪除樣式表對象裏的指定代碼塊，也就是選擇器，參數是要刪除第幾個選擇器，非IE不支持
使用方式：
樣式表對象.removeRule(要刪除第幾個選擇器)

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //removeRule()方法，IE用於替代deleteRule()方法，刪除樣式表對象裏的指定代碼塊，也就是選擇器，參數是要刪除第幾個選擇器，非IE不支持
    style.removeRule(0);  //刪除指定選擇器
};

addRule()方法，IE用於替代insertRule()方法，向樣式表對象裏添加一條規則，也就是添加一個選擇器，3個參數，第一個選擇器名稱，第二個樣式，第三要添加的個位置，非IE不支持
使用方式：
樣式表對象.addRule("選擇器名稱","樣式",要添加的個位置)

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">
//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //addRule()方法，IE用於替代insertRule()方法，向樣式表對象裏添加一條規則，也就是添加一個選擇器，3個參數，第一個選擇器名稱，第二個樣式，第三要添加的個位置，非IE不支持
    style.addRule(".box3","background-color: #33ff38",0);  //向樣式表對象裏添加一條規則
};

跨瀏覽器解決方案，【重點】

跨瀏覽器兼容，刪除一個樣式表對象裏的一條指定選擇器

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">

// @charset "utf-8";
// .box1{
//     color: #ff3226;
// }
// .box2{
//     color: #33ff38;
// }

//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象
    shchu(style,0)

    //跨瀏覽器兼容，刪除一個樣式表對象裏的一條指定選擇器
    function shchu(style,position) {  //接收兩個參數，第一個樣式表對象，第二個要刪除第幾個選擇器
        //判斷deleteRule()方法，刪除樣式表對象裏的指定代碼塊，若是爲真，說明瀏覽器支持deleteRule()
        if(style.deleteRule){
            style.deleteRule(position);   //刪除指定的選擇器
        }else if(style.removeRule){      //判斷removeRule()方法，刪除樣式表對象裏的指定代碼塊，若是爲真，說明瀏覽器支持removeRule()
            style.removeRule(position);   //刪除指定的選擇器
        }
    }
};

跨瀏覽器兼容，添加一個樣式表對象裏的一條指定選擇器

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">

// @charset "utf-8";
// .box1{
//     color: #ff3226;
// }
// .box2{
//     color: #33ff38;
// }

//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象
    tianjia(style,'.box3','background-color: #2616ff;',2);


    //跨瀏覽器兼容，添加一個樣式表對象裏的一條指定選擇器
    function tianjia(style,xzq,yshi,position) {  //接收4個參數，第一個是樣式表對象，第二個是選擇器名稱，第三個是樣式，第四個是要添加的位置
        //判斷insertRule()方法，向樣式表對象裏添加一條規則，若是爲真，說明瀏覽器支持
        if(style.insertRule){
            style.insertRule(xzq + '{' + yshi + '}',position);  //向樣式表對象裏添加一條規則
        }else if(style.addRule){   //判斷addRule()方法，向樣式表對象裏添加一條規則，若是爲真，說明瀏覽器支持
            style.addRule(xzq,yshi,position);  //向樣式表對象裏添加一條規則
        }
    }
};

解決跨瀏覽器獲取樣式表裏的css選擇器集合，也就是css代碼塊的集合，代碼塊就是一個選擇器，要能夠理解爲css選擇器集合

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">

// @charset "utf-8";
// .box1{
//     color: #ff3226;
// }
// .box2{
//     color: #33ff38;
// }

//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //解決跨瀏覽器獲取樣式表裏的css選擇器集合，也就是css代碼塊的集合，代碼塊就是一個選擇器，要能夠理解爲css選擇器集合
    //若是瀏覽器執行cssRules不成功，就執行rules，來獲取樣式表對象裏的選擇器集合，獲得的是選擇器集合
    var rules = style.cssRules || style.rules;
    alert(rules);
};

用以上方式獲取到樣式選擇器後，能夠經過選擇器CSSStyleRule屬性和方法來獲取或者設置

CSSStyleRule可使用的屬性

屬性	說明
cssText	獲取當前整條規則對應的文本，IE不支持
parentRule	@import導入的，返回規則或null，IE不支持
parentStyleSheet	當前規則的樣式表，IE不支持
selectorText	獲取當前規則的選擇符文本
style	返回CSSStyleDeclaration 對象，能夠獲取和設置樣式
type	表示規則的常量值，對於樣式規則，值爲1，IE不支持

cssText屬性，獲取當前css選擇器樣式文本
使用方式：
css選擇器對象.cssText

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">

// @charset "utf-8";
// .box1{
//     color: #ff3226;
// }
// .box2{
//     color: #33ff38;
// }

//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //解決跨瀏覽器獲取樣式表裏的css選擇器集合，也就是css代碼塊的集合，代碼塊就是一個選擇器，要能夠理解爲css選擇器集合
    //若是瀏覽器執行cssRules不成功，就執行rules，來獲取樣式表對象裏的選擇器集合，獲得的是選擇器集合
    var rules = style.cssRules || style.rules;
    alert(rules[1].cssText);   //cssText屬性，獲取當前css選擇器樣式文本
    //返回;.box2 { color: rgb(51, 255, 56); }
};

selectorText屬性，獲取當前css選擇器名稱
使用方式：
css選擇器對象.selectorText

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">

// @charset "utf-8";
// .box1{
//     color: #ff3226;
// }
// .box2{
//     color: #33ff38;
// }

//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //解決跨瀏覽器獲取樣式表裏的css選擇器集合，也就是css代碼塊的集合，代碼塊就是一個選擇器，要能夠理解爲css選擇器集合
    //若是瀏覽器執行cssRules不成功，就執行rules，來獲取樣式表對象裏的選擇器集合，獲得的是選擇器集合
    var rules = style.cssRules || style.rules;
    alert(rules[1].selectorText);   //selectorText屬性，獲取當前css選擇器名稱
    //返回;.box2
};

style屬性，獲取或設置當前css選擇器裏指定樣式的值，後面跟要獲取或設置的樣式名稱
使用方式：
css選擇器對象.style.color

//<link rel="stylesheet" title='xxx' type="text/css" href="1.css">

// @charset "utf-8";
// .box1{
//     color: #ff3226;
// }
// .box2{
//     color: #33ff38;
// }

//<div id="box" class="box1">測試1</div>

window.onload = function() { //window.onload事件，等待html執行完成後，執行匿名函數
    //styleSheet屬性,直接獲取css樣式表對象，有幾個樣式表就能獲取到幾個樣式表對象，返回集合，既能夠獲取到內聯樣式又能夠獲取到鏈接樣式【推薦】
    var style = document.styleSheets[0]; //獲取樣式表對象集合裏的第一個樣式表對象

    //解決跨瀏覽器獲取樣式表裏的css選擇器集合，也就是css代碼塊的集合，代碼塊就是一個選擇器，要能夠理解爲css選擇器集合
    //若是瀏覽器執行cssRules不成功，就執行rules，來獲取樣式表對象裏的選擇器集合，獲得的是選擇器集合
    var rules = style.cssRules || style.rules;
    alert(rules[0].style.color);   //style屬性，獲取或設置當前css選擇器裏指定樣式的值，後面跟要獲取或設置的樣式名稱
    //返回;rgb(51, 255, 56)
    rules[0].style.color = '#33ff38';  //從新設置color值
};