Javascript 如何仅为某些类或ID导入CSS？

比如说，我有这个HTML结构：

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

现在在javascript的帮助下，我可以轻松地加载整个CSS，从而使

#header

和

#footer

的文本颜色变为红色

---

使用javascript，是否可以只加载引用

#header

的样式，并过滤掉我的样式表中的任何其他样式（在我的情况下是

#footer

的样式）？

这可以通过直接修改应用于当前文档的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>

//要点：将此放置在加载所有CSS资源后将执行的位置（即，body标记的开始或结束）
//将是一个包含所有选择器的数组，用于保存CSS规则
规则列表=[“#标题”]；
var docRulesEntry=document.all？“规则“：“cssRules”；
//循环加载的样式表
for（var i=0；i

---

JSFIDLE demo（在Chrome上测试）：

您的意思是为了浏览器性能或服务器优化而删除它们吗？无论哪种方式都会有处理，不同之处在于一个无法完成。@Bryan不，我只是不希望此样式表应用于除#header之外的任何东西。哦，等等。。。我还不知道正在做什么，但它似乎起了作用：D@nicael很高兴听到这个消息。CSS规则的修改一般来说有点复杂。我要在现实生活中测试：）谢谢你的澄清！美好的但是，是否存在FOUC问题的风险？我是否可以确保浏览器不会先应用原始样式表，然后在修改页面后才重新显示页面？

<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>