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

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

我不是在说：

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

我在谈论改变：

 #id { param: value; } 

除了做一些肮脏的事情（我们还没有尝试过），就像在头上创build一个新的对象，innerHTML里面有一个样式标签等等。尽pipe如此，即使它起作用，也会带来一些问题块已经定义在其他地方，我不知道什么时候/如果浏览器甚至会parsing一个dynamic创build的样式块？

再一次，谢谢，万岁！

Answer 1

截至2011年

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

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

截至2016年

浏览器支持已经提高了很多（每个浏览器都支持，包括IE9 +）。

• insertRule()方法允许dynamic添加规则到样式表。

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

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

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 < s.cssRules.length; i++) { var rule = s.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"); 

演示

Answer 3

当我想以编程方式向对象中添加一堆样式时，我发现以编程方式向对象中添加一个类更容易（这样的类在CSS中具有与它相关联的样式）。 您可以控制CSS中的优先顺序，以便新类中的新样式可以覆盖以前的样式。 这通常比直接修改样式表更容易，并且完美地跨浏览器。