//以下两种方法都可以动态改变样式，采用的是插入样式表规则来改变
document.styleSheet[0].addRule('.red:before','background-color:green');
document.styleSheet[0].insertRule('.red:before{background-color:green}',0);
//设置图片
document.styleSheet[0].addRule('.red:before','content:url('xxx.png')'); //图片大小不能设置
document.styleSheet[0].addRule('.red:before','content:" ";background:url();width:20px'); //图片大小可以设置
插入规则
在早期版本的IE中 Stylesheets 的 insertRule方法并不可用,虽然现在这是规则注入的标准。insertRule 方法需要编写整个CSS规则,和在样式表中是一样的写法:
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
这个JavaScript API方法虽然看起来有点土，但它确实就是这样运行的。第二个参数 index 表示要插入规则的位置(索引)。这也是非常有用的,这样你就可以插入同样的规则/代码,这可以让靠后的规则生效。默认的index是 -1 ,代表整个集合的末尾。如果想要有额外的/懒惰控制规则,你也可以添加 !important 标记到某条规则后,以避免索引的问题。
添加规则 —— 非标准的 addRule 方法
CSSStyleSheet 对象有一个 addRule 方法,允许你注册CSS规则到样式表中。 addRule 方法接受三个参数: 第一个参数是选择器(selector)、第二个参数是CSS规则代码, 第三个则是从0开始的整数索引,表示样式的位置(在同一个选择器中):
sheet.addRule("#myList li", "float: left; background: red !important;", 1);
addRule方法的返回值总是 -1,所以这个值并没有什么实际意义.
记住,这种方式的优点在于,从页面添加的元素自动拥有了应用于他们的样式,也就是说你不必将它们添加到具体的元素上,而是直接注入到页面中。当然效率更高!
