js操作styleSheets

document.styleSheets这个接口可以获取网页上引入的link样式表和style样式表。比如

最后的输出结果如下。

换下代码看看我们具体的styleSheets具体输出什么

这些都是次要的,假设我想把style里面的样式输出该怎么办。这个时候我们需要用到styleSheets对象的cssRules属性,如下

看到没有,我们把style里面所有的样式都输出了,这个时候假设我们只想要到某一条样式就可这样写。

我们继续深究细分下去,那么我们想输出更加具体的内容该怎么办呢,可以这样做

那么,这个属性除了可读之外,它同时也是支持我们的改写的

同时需要注意的是,这种修改会影响到所有应用到了这个box属性的所有元素。所以我对styleSheets的感觉是,它是从根源上操作css样式,在这上面做的每一次修改会影响到所有应用该样式的元素。而我们平时使用的行内样式抑或是cssText跟它相比有点像是小打小闹,再怎么修改都只是影响个别元素。同时这里我也想到了一套方案,平时我们想改变某几个元素的颜色,一般都是事先在style里面写好另一个class属性,等到我们点击改变的时候就把所有相关元素的class都换成那个事先定义好的class。其实这里的话应该还有另一种做法就是从根源上使用styleSheet重写那部分的class属性,而不需要更改class。

原文地址:https://www.cnblogs.com/jelly7723/p/5531742.html