另一种对外部样式表的获取、修改方法_document.stylesheets 读取外部样式表-优快云博客

本文链接：https://blog.youkuaiyun.com/github_36353021/article/details/52782814

本文介绍了如何通过JavaScript访问和修改外部CSS样式。主要讲解了如何使用document.styleSheets和cssRules（或rules）来获取样式表及其中的具体样式规则，并演示了如何读取和更改这些规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于外部样式的访问与修改，我们就不能通过普通的style.的方式来修改样式，我们要通过document中的styleSheets集合来实现这个目的，
这个集合包含HTML页面中所有的样式表，DOM为每个样式表定义了一个cssRules的集合，这个集合中包含定义在样式表中的所有CSS规则，这里要
注意的就是在Mozilla和Safasi中是cssRules而在IE中是使用的rules。
我们也可以通过一个简单的例子来说明：
首先我们定义一个外部的样式文件(文件名.css)

for example:


.div1{
 width:800px;
 height:900px;
 background-color；red;
}
//访问外部CSS

//这里需要注意的就是styleSheets[0]这里的0代表的是哪个css文件,如果引入多个css样式的话，就改下标，同数组原理一样。
var myRules=document.styleSheets[0].rules||document.styleSheets[0].cssRules;    
 //同时对IE和非IE适用
//对于得到的myRules若有多个class用于选择哪个class样式我们可以通过如下方式取得对于的class样式
var backcolor=myRules["div1"].style.backgroundColor;
//也可以设置值，若我们想修改背景颜色
myRules["div1"].style.backgroundColor="black";