如何僅爲某些類或ID導入CSS？

Question

說，我有這樣的HTML結構：

<div id="header">Header</div> 
<div id="body">Body</div> 
<div id="footer">Footer</div> 

和外部CSS文件（/styles.css），其中包含

#header{ 
    color:red; 
}  
#footer{ 
    color:red; 
} 

現在用JavaScript的幫助下，我可以很容易地加載整個CSS，所以因爲#header和#footer的文字顏色變爲紅色。

使用javascript，是否有可能只加載引用#header的樣式，並在我的樣式表中過濾出任何其他樣式（在我的情況下樣式爲#footer）？

Answer 1

這可以通過直接修改應用於當前文檔的CSS規則來完成。

<script type="text/javascript"> 
    // Important: Place this where it will be executed once all the CSS resources have been loaded (i.e, beginning or the end of the body tag) 

    // The will be an array of all the selectors to keep CSS rules for 
    ruleList = ["#header"]; 
    var docRulesEntry = document.all ? 'rules' : 'cssRules'; 

    // Loop through loaded stylesheets 
    for(var i = 0; i < document.styleSheets.length; i++) 
    { 
     if(document.styleSheets[i][docRulesEntry] !== null && document.styleSheets[i][docRulesEntry] !== undefined) 
     { 
      // Loop through stylesheet rules 
      for(var o = 0; o < document.styleSheets[i][docRulesEntry].length; o++) 
      { 
       if(document.styleSheets[i][docRulesEntry][o] !== null && document.styleSheets[i][docRulesEntry][o] !== undefined) 
       { 
        // Check if selector exists in our ruleList array 
        if(ruleList.indexOf(document.styleSheets[i][docRulesEntry][o].selectorText) == -1 
         && document.styleSheets[i][docRulesEntry][o].style !== undefined && document.styleSheets[i][docRulesEntry][o].style !== null) 
        { 
         // Selector was not found, remove CSS rules 
         document.styleSheets[i][docRulesEntry][o].style.cssText = ''; 
        } 
       } 
      } 
     } 
    } 
</script> 

的jsfiddle演示（在Chrome測試）：https://jsfiddle.net/ud5svdky/1/