是否可以使用 JavaScript 更改 CSS 样式表？ （不是对象的样式，而是样式表本身）

Question

是否可以使用 JavaScript 更改 CSS 样式表？

我 不是 在谈论：

 document.getElementById('id').style._____='.....';

我 说 的是改变：

 #id {
    param: value;
}

除了做一些肮脏的事情（顺便说一句，我们还没有尝试过），比如在头部创建一个新对象，在里面创建一个样式标签 innerHTML 等等。尽管这样，即使它确实有效，也会带来一些问题作为样式块已经在别处定义，我不确定浏览器何时/是否会解析动态创建的样式块？

原文由 anonymous-one 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

截至2011年

是的，你可以，但你将面临跨浏览器兼容性问题：

http://www.quirksmode.org/dom/changess.html

截至2016年

浏览器支持改进了很多（支持所有浏览器，包括 IE9+）。

• insertRule() 方法允许向样式表动态添加规则。

• 使用 deleteRule() ，您可以从样式表中删除现有规则。

• 样式表中的规则可以通过样式表的 cssRules 属性访问。

原文由 Mathieu Rodic 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我们可以结合使用 .insertRule 和 .cssRules 来回到 IE9：

 function changeStylesheetRule(stylesheet, selector, property, value) {
    // Make the strings lowercase
    selector = selector.toLowerCase();
    property = property.toLowerCase();
    value = value.toLowerCase();

    // Change it if it exists
    for(var i = 0; i < stylesheet.cssRules.length; i++) {
        var rule = stylesheet.cssRules[i];
        if(rule.selectorText === selector) {
            rule.style[property] = value;
            return;
        }
    }

    // Add it if it does not
    stylesheet.insertRule(selector + " { " + property + ": " + value + "; }", 0);
}

// Used like so:
changeStylesheetRule(s, "body", "color", "rebeccapurple");

演示

原文由 Zach Saucier 发布，翻译遵循 CC BY-SA 4.0 许可协议