使用JavaScript建立新樣式表和新樣式規則_php執行個體

如今的這個年代，流行在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?1.1.2" 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 <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。

添加樣式規則 – 標準的addRule方法

CSSStyleSheet對象裡有一個addRule方法，它可以接受3個參數：選取器、樣式規則的CSS代碼和一個整數，這個整數用來指示樣式表的位置(相對於同樣的選取器)：

sheet.addRule("#myList li", "float: left; background: red !important;", 1);
位置預設值為-1，表示放在最後。為了進行額外的控制，或偷懶的寫法，你可以在規則裡添加!important來消除位置引起的問題。調用addRule會返回-1——它什麼都不表示。

你會發現，這種技術的優勢在於，它可以動態往頁面上添加樣式規則，並應用它們；你不必對每個元素進行操作，瀏覽器會自動應用這些規則。高效吧！

新增樣式規則

CSSStyleSheet對象裡還有一個insertRule方法，但在早期的IE裡是沒有這個方法的。insertRule方法把addRule方法的前兩個參數混合到了一起：

sheet.insertRule("header { float: left; opacity: 0.8; }", 1);

這個方法看起來很醜陋，但無疑也是非常有用的。

安全的應用樣式規則

因為並不是所有的瀏覽器都支援insertRule，最好我們做一些封裝來確保代碼的有效執行。下面就是一個很簡單的封裝方法：

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)增加樣式規則

有兩個方法可以為特定的媒體查詢增加樣式規則。第一種是通過標準的insertRule方法：

sheet.insertRule("@media only screen and (max-width : 1140px) { header { display: none; } }");

因為老式的IE不支援insertRule，我們可以使用另外一種方法，就是建立一個STYLE元素，賦予它正確的media屬性，然後往裡面添加新的樣式規則。這種方式會增加額外的STYLE元素，但十分的簡單。

我認為動態往樣式表裡添加樣式規則是一種十分高效而且簡單的技術。記住在你的下一個應用裡試一下這種技術，它會省了你很多功夫。

以上就是使用JavaScript建立新樣式表和新樣式規則_php執行個體的內容，更多相關內容請關注topic.alibabacloud.com（www.php.cn）！

