是否有可能使用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中的优先顺序,以便新类中的新样式可以覆盖以前的样式。 这通常比直接修改样式表更容易,并且完美地跨浏览器。