JavaScript開發者們與原型鏈的關係總是若即若離，糾纏不清。在JavaScript中“建立物件”是一個複雜的話題。這門語言提供了很多種建立物件的方式，不論新手還是老手都可能對此感到無所適從，不知道應該選擇哪一種。不過，儘管建立物件的方法很多，看上去語法差異也很大，但實際上它們的相似性可能比你所以為的要多。本文將帶領你踏上一段梳理物件建立方法的旅程，為你揭示不同方法之間的依賴與遞進關係。
捕獲樣式表
你的頁面上可能引用了不只一個的樣式檔案，你可以選擇其中的一個。如果你指定了某個，你可以在HTML頁面中的LINK 和 STYLE標籤上加入ID來進行區別，獲取CSSStyleSheet物件，它存放在eSheets物件裡。
var sheets = eSheets; // 返回一個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 = eSheets[0];
一個重要的需要注意的事情是樣式表的media屬性——如果你不小心，當想往螢幕顯示使用的樣式表裡做修改操作時，你也許會錯誤的修改了用於列印(print)時使用的樣式表。CSSStyleSheet物件裡有各種屬性資訊，需要時你可以從中獲取。
// Get info about the first (eSheets[0]);/*
返回結果：
CSSStyleSheet
cssRules: CSSRuleList
disabled: false
href: ""
media: MediaList
ownerNode: link
ownerRule: null
parentStyleSheet: null
rules: CSSRuleList
title: null
type: "text/css"
*/// Get the media (eSheets[0]aText)/*
Returns:
"all" or "print" or whichever media is used for this stylesheet
*/
有很多方法都可以讓你捕獲一個樣式表，往裡面新增新樣式規則。
建立一個新的樣式表
大多數時候，最好的方法是建立一個新的STYLE元素，動態的往裡面新增規則。非常簡單：
var sheet = (function() {
// Create the <style> tag
var style = teElement("style");
// 如果你願意的話，可以新增media屬性 (或 media query)
// ttribute("media", "screen")
// ttribute("media", "@media only screen and (max-width : 1024px)")
// WebKit 補丁
ndChild(teTextNode(""));
// Add the <style> element to the page
ndChild(style);
return t;})();
不幸的是，WebKit型別的瀏覽器需求做一點點小修改，才能讓上面的程式碼正確的執行，但不管怎樣，我們獲得了想要的sheet。
新增樣式規則 – 標準的addRule方法
CSSStyleSheet物件裡有一個addRule方法，它可以接受3個引數：選擇器、樣式規則的CSS程式碼和一個整數，這個整數用來指示樣式表的位置(相對於同樣的選擇器)：
ule("#myList li", "float: left; background: red !important;", 1);
位置預設值為-1，表示放在最後。為了進行額外的控制，或偷懶的寫法，你可以在規則裡新增!important來消除位置引起的問題。呼叫addRule會返回-1——它什麼都不表示。
你會發現，這種技術的優勢在於，它可以動態的往頁面上新增樣式規則，並應用它們；你不必對每個元素進行操作，瀏覽器會自動應用這些規則。高效吧！
新增樣式規則
CSSStyleSheet物件裡還有一個insertRule方法，但在早期的IE裡是沒有這個方法的。insertRule方法把addRule方法的前兩個引數混合到了一起：
rtRule("header { float: left; opacity: 0.8; }", 1);
這個方法看起來很醜陋，但無疑也是非常有用的`。
安全的應用樣式規則
因為並不是所有的瀏覽器都支援insertRule，最好我們做一些封裝來確保程式碼的有效執行。下面就是一個很簡單的封裝方法：
function addCSSRule(sheet, selector, rules, index) {
if(rtRule) {
rtRule(selector + "{" + rules + "}", index);
}
else {
ule(selector, rules, index);
}}// Use it!addCSSRule(eSheets[0], "header", "float: left");
這個方法可以應對各種情況。如果你想把這個方法裡的程式碼單獨拿出來使用，最好用try{}catch(e){}把它們包起來。
為媒體查詢(Media Queries)增加樣式規則
有兩個方法可以為特定的媒體查詢增加樣式規則。第一種是通過標準的insertRule方法：
rtRule("@media only screen and (max-width : 1140px) { header { display: none; } }");
因為老式的IE不支援insertRule，我們可以使用另外一種方法，就是建立一個STYLE元素，賦予它正確的media屬性，然後往裡面新增新的樣式規則。這種方式會增加額外的STYLE元素，但十分的簡單。
我認為動態的往樣式表裡新增樣式規則是一種十分高效而且簡單的技術。記住在你的下一個應用裡試一下這種技術，它會省了你很多功夫。
