使用JavaScript建立新樣式表和新樣式規則，javascript樣式表_PHP教程

使用JavaScript建立新樣式表和新樣式規則，javascript樣式表

如今的這個年代，流行在Web頁面上使用了大量的JavaScript，我們需要尋找各種方式來最佳化它們，使它們更快。我們使用事件委託來讓事件監聽器更有效率，使用降頻技術來限定某些方法的使用次數，使用各種JavaScript載入器來動態載入我們需要的資源，等等。另外一種讓頁面更高效、更敏捷的方法是動態添加或移除樣式表裡的樣式，而不需要去查詢DOM元素，對每個元素做樣式調整。下面我們就來看看如何使用這種技術！

捕獲樣式表

你的頁面上可能引用了不只一個的樣式檔案，你可以選擇其中的一個。如果你指定了某個，你可以在HTML頁面中的LINK 和 STYLE標籤上加入ID來進行區別，擷取CSSStyleSheet對象，它存放在document.styleSheets對象裡。

var sheets = document.styleSheets; // 返回一個StyleSheetList數組/*返回： 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 stylesheetconsole.log(document.styleSheets[0]);/*返回結果： 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 typeconsole.log(document.styleSheets[0].media.mediaText)/*Returns: "all" or "print" or whichever media is used for this stylesheet*/

有很多方法都可以讓你捕獲一個樣式表，往裡面添加新樣式規則。

建立一個新的樣式表

大多數時候，最好的方法是建立一個新的STYLE元素，動態往裡面添加規則。非常簡單：

var sheet = (function() { // Create the