是否有可能使用JavaScript更改CSS样式表? (不是一个对象的样式,而是样式表本身)

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

不是在说:

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

我在谈论改变:

 #id { param: value; } 

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

再一次,谢谢,万岁!

截至2011年

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

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

截至2016年

浏览器支持已经提高了很多(每个浏览器都支持,包括IE9 +)。

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

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

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

我们可以使用.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"); 

演示

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