這篇文章主要介紹了使用JavaScript創(chuàng)建新樣式表和新樣式規(guī)則的相關(guān)資料,需要的朋友可以參考下
    如今的這個年代，流行在Web頁面上使用了大量的JavaScript，我們需要尋找各種方式來優(yōu)化它們，使它們更快。我們使用事件委托來讓事件監(jiān)聽器更有效率，使用降頻技術(shù)來限定某些方法的使用次數(shù)，使用各種JavaScript加載器來動態(tài)加載我們需要的資源，等等。另外一種讓頁面更高效、更敏捷的方法是動態(tài)的添加或移除樣式表里的樣式，而不需要去查詢DOM元素，對每個元素做樣式調(diào)整。下面我們就來看看如何使用這種技術(shù)！
    捕獲樣式表
    你的頁面上可能引用了不只一個的樣式文件，你可以選擇其中的一個。如果你指定了某個，你可以在HTML頁面中的LINK 和 STYLE標簽上加入ID來進行區(qū)別，獲取CSSStyleSheet對象，它存放在document.styleSheets對象里。
    var sheets = document.styleSheets; // 返回一個StyleSheetList數(shù)組
    /*
    返回： 
    StyleSheetList {0: CSSStyleSheet, 1: CSSStyleSheet, 2: CSSStyleSheet, 3: CSSStyleSheet, 4: CSSStyleSheet, 5: CSSStyleSheet, 6: CSSStyleSheet, 7: CSSStyleSheet, 8: CSSStyleSheet, 9: CSSStyleSheet, 10: CSSStyleSheet, 11: CSSStyleSheet, 12: CSSStyleSheet, 13: CSSStyleSheet, 14: CSSStyleSheet, 15: CSSStyleSheet, length: 16, item: function}
    */
    // 找到你想要修改的樣式表
    var sheet = document.styleSheets[0];
    一個重要的需要注意的事情是樣式表的media屬性——如果你不小心，當想往屏幕顯示使用的樣式表里做修改操作時，你也許會錯誤的修改了用于打印(print)時使用的樣式表。CSSStyleSheet對象里有各種屬性信息，需要時你可以從中獲取。
    // Get info about the first stylesheet
    console.log(document.styleSheets[0]);
    /*
    返回結(jié)果： 
    CSSStyleSheet
     cssRules: CSSRuleList
     disabled: false
     href: "http://davidwalsh.name/somesheet.css"
     media: MediaList
     ownerNode: link
     ownerRule: null
     parentStyleSheet: null
     rules: CSSRuleList
     title: null
     type: "text/css"
    */
    // Get the media type
    console.log(document.styleSheets[0].media.mediaText)
    /*
    Returns:
     "all" or "print" or whichever media is used for this stylesheet
    */
    有很多方法都可以讓你捕獲一個樣式表，往里面添加新樣式規(guī)則。
    創(chuàng)建一個新的樣式表
    大多數(shù)時候，最好的方法是創(chuàng)建一個新的STYLE元素，動態(tài)的往里面添加規(guī)則。非常簡單：
    var sheet = (function() {
     // Create the <style> tag
     var style = document.createElement("style");
     // 如果你愿意的話，可以添加media屬性 (或 media query) 
     // style.setAttribute("media", "screen")
     // style.setAttribute("media", "@media only screen and (max-width : 1024px)")
     // WebKit 補丁 
     style.appendChild(document.createTextNode(""));
     // Add the <style> element to the page
     document.head.appendChild(style);
     return style.sheet;
    })();
    不幸的是，WebKit類型的瀏覽器需求做一點點小修改，才能讓上面的代碼正確的運行，但不管怎樣，我們獲得了想要的sheet。
    添加樣式規(guī)則–標準的addRule方法
    CSSStyleSheet對象里有一個addRule方法，它可以接受3個參數(shù)：選擇器、樣式規(guī)則的CSS代碼和一個整數(shù)，這個整數(shù)用來指示樣式表的位置(相對于同樣的選擇器)：
    sheet.addRule("#myList li", "float: left; background: red !important;", 1);
    位置缺省值為-1，表示放在最后。為了進行額外的控制，或偷懶的寫法，你可以在規(guī)則里添加!important來消除位置引起的問題。調(diào)用addRule會返回-1——它什么都不表示。
    你會發(fā)現(xiàn)，這種技術(shù)的優(yōu)勢在于，它可以動態(tài)的往頁面上添加樣式規(guī)則，并應用它們；你不必對每個元素進行操作，瀏覽器會自動應用這些規(guī)則。高效吧！
    新增樣式規(guī)則
    CSSStyleSheet對象里還有一個insertRule方法，但在早期的IE里是沒有這個方法的。insertRule方法把addRule方法的前兩個參數(shù)混合到了一起：
    sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
    這個方法看起來很丑陋，但無疑也是非常有用的。
    安全的應用樣式規(guī)則
    因為并不是所有的瀏覽器都支持insertRule，最好我們做一些封裝來確保代碼的有效執(zhí)行。下面就是一個很簡單的封裝方法：
    function addCSSRule(sheet, selector, rules, index) {
     if(sheet.insertRule) {
     sheet.insertRule(selector + "{" + rules + "}", index);
     }
     else {
     sheet.addRule(selector, rules, index);
     }
    }
    // Use it!
    addCSSRule(document.styleSheets[0], "header", "float: left");
    這個方法可以應對各種情況。如果你想把這個方法里的代碼單獨拿出來使用，最好用try{}catch(e){}把它們包起來。
    為媒體查詢(Media Queries)增加樣式規(guī)則
    有兩個方法可以為特定的媒體查詢增加樣式規(guī)則。第一種是通過標準的insertRule方法：
    sheet.insertRule("@media only screen and (max-width : 1140px) { header { display: none; } }");
    因為老式的IE不支持insertRule，我們可以使用另外一種方法，就是創(chuàng)建一個STYLE元素，賦予它正確的media屬性，然后往里面添加新的樣式規(guī)則。這種方式會增加額外的STYLE元素，但十分的簡單。
    我認為動態(tài)的往樣式表里添加樣式規(guī)則是一種十分高效而且簡單的技術(shù)。記住在你的下一個應用里試一下這種技術(shù)，它會省了你很多功夫。
    (英文：Add Rules to Stylesheets with JavaScript.)
    以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助