使用js操作样式我们通常操作的是dom的style属性，也就是我们所说的行内样式，那么有没有一种方法可以操作css文件中的样式呢？答案是肯定的，我们可以使用cssom来操作css文件中的样式。
1. cssom
cssom是css对象模型，它是css的一个抽象表示，它允许我们使用js来操作css文件中的样式，它是css的一个抽象表示，它允许我们使用js来操作css文件中的样式。
既然是cssom是对象模型，那么就可以使用js来操作它，那么我们就可以使用js来操作css文件中的样式了。
2. cssom的使用
2.1 获取cssom
我们可以使用document.styleSheets来获取cssom，它是一个StyleSheetList对象，它是一个类数组对象，我们可以使用[index]来获取对应的cssom，也可以使用item(index)来获取对应的cssom。
styleSheets记录的是当前页面中所有的css文件，这里的css文件包括link标签引入的css文件，@import引入的css文件，以及style标签中的css样式，他们会依次按照引入的顺序存放在styleSheets中。
/* 获取cssom */
const cssom = document.styleSheets[0];
上面这段代码中，我们获取了第一个cssom，我们可以通过cssom来操作css文件中的样式。
上面的代码可以在任何站点中进行测试，我们可以在控制台中输入上面的代码，然后输入cssom，就可以看到cssom的信息了。
2.2 cssom的属性
cssom有很多的属性，我们可以通过cssom来获取css文件中的样式，下面我们来看一下cssom的属性。
2.2.1 cssRules
cssRules是一个CSSRuleList对象，它是一个类数组对象，我们可以使用[index]来获取对应的cssRule，也可以使用item(index)来获取对应的cssRule。
cssRules记录的是当前cssom中的所有的cssRule，每一个cssRule都是一个css规则，它包含了一个style标签、一个link标签或者一个@import引入的css文件中的所有的样式。
/* 获取cssRules */
const cssRules = cssom.cssRules;
上面这段代码中，我们获取了cssom中的所有的cssRule，我们可以通过cssRules来操作css文件中的样式。
cssRules在引用源非本域的情况下，是不可访问的，也就是说，如果我们在a.com中引用了b.com中的css文件，那么我们就无法获取到b.com中的cssRules。
2.2.2 href
href是一个字符串，它记录的是当前cssom对应的css文件的路径。
/* 获取href */
const href = cssom.href;
href属性中记录的是当前cssom对应的css文件的路径，如果当前cssom是一个style标签中的css样式，那么href的值为null。
只有当cssom是一个link标签或者一个@import引入的css文件时，href才有值。
2.2.3 ownerNode
ownerNode是一个Node对象，它记录的是当前cssom对应的css文件的节点。
/* 获取ownerNode */
const ownerNode = cssom.ownerNode;
ownerNode属性中记录的是当前cssom对应的css文件的节点，如果当前cssom是一个style标签中的css样式，那么ownerNode的值为style标签。
如果当前cssom是一个link标签中的css样式，那么ownerNode的值为link标签。
2.2.4 type
type是一个字符串，它记录的是当前cssom对应的css文件的type属性。
/* 获取type */
const type = cssom.type;
type属性中记录的是当前cssom对应的css文件的type属性，如果当前cssom是一个style标签中的css样式，那么type的值为text/css。
2.2.5 disabled
disabled是一个布尔值，它记录的是当前cssom对应的css文件是否被禁用。
/* 获取disabled */
const disabled = cssom.disabled;
disabled属性中记录的是当前cssom对应的css文件是否被禁用，disabled == false不能保证当前cssom对应的css文件是启用的，因为css文件可能被其他的css文件覆盖了，或者被移除了。
3. CSSRule
CSSRule是一个抽象类，它是所有cssRule的基类，它有一个type属性，它记录的是当前cssRule的类型。
type已经被标记废弃了，我们可以通过instanceof来判断当前cssRule的类型。
/* 判断cssRule的类型 */
if (cssRule instanceof CSSStyleRule) {
// cssRule是CSSStyleRule
} else if (cssRule instanceof CSSImportRule) {
// cssRule是CSSImportRule
} else if (cssRule instanceof CSSMediaRule) {
// cssRule是CSSMediaRule
} else if (cssRule instanceof CSSFontFaceRule) {
// cssRule是CSSFontFaceRule
} else if (cssRule instanceof CSSPageRule) {
// cssRule是CSSPageRule
} else if (cssRule instanceof CSSKeyframesRule) {
// cssRule是CSSKeyframesRule
} else if (cssRule instanceof CSSKeyframeRule) {
// cssRule是CSSKeyframeRule
} else if (cssRule instanceof CSSNamespaceRule) {
// cssRule是CSSNamespaceRule
} else if (cssRule instanceof CSSSupportsRule) {
// cssRule是CSSSupportsRule
} else if (cssRule instanceof CSSCounterStyleRule) {
// cssRule是CSSCounterStyleRule
}
3.1 CSSStyleRule
CSSStyleRule是一个类，它表示一个css样式规则，它有一个selectorText属性，它记录的是当前css样式规则的选择器。
/* 获取css样式规则的选择器 */
const selectorText = cssStyleRule.selectorText;
selectorText属性中记录的是当前css样式规则的选择器，就是我们在css文件中写的选择器。
CSSStyleRule还有一个style属性，它记录的是当前css样式规则的样式。
/* 获取css样式规则的样式 */
const style = cssStyleRule.style;
style属性中记录的是当前css样式规则的样式，就是我们在css文件中写的样式。
当然它并不是只有我们写的样式，它还包含了浏览器默认的样式，比如body标签的默认样式，本质上它是一个CSSStyleDeclaration对象，包含了当前css样式规则的所有样式。
3.2 CSSImportRule
CSSImportRule是一个类，它表示一个css导入规则，它有一个href属性，它记录的是当前css导入规则的href属性。
/* 获取css导入规则的href */
const href = cssImportRule.href;
href属性中记录的是当前css导入规则的href属性，就是我们在css文件中写的href属性。
CSSImportRule还有一个styleSheet属性，它记录的是当前css导入规则的样式表。
/* 获取css导入规则的样式表 */
const styleSheet = cssImportRule.styleSheet;
styleSheet属性中记录的是当前css导入规则的样式表，就是我们在css文件中写的样式表。
3.3 CSSMediaRule
CSSMediaRule是一个类，它表示一个css媒体规则，它有一个media属性，它记录的是当前css媒体规则的媒体。
/* 获取css媒体规则的媒体 */
const media = cssMediaRule.media;
media属性中记录的是当前css媒体规则的媒体，就是我们在css文件中写的媒体。
CSSMediaRule还有一个cssRules属性，它记录的是当前css媒体规则的样式规则。
/* 获取css媒体规则的样式规则 */
const cssRules = cssMediaRule.cssRules;
cssRules属性中记录的是当前css媒体规则的样式规则。
3.4 CSSFontFaceRule
CSSFontFaceRule是一个类，它表示一个css字体规则，它有一个style属性，它记录的是当前css字体规则的样式。
/* 获取css字体规则的样式 */
const style = cssFontFaceRule.style;
后面的就不一一介绍了，毕竟大部分都不常用，大家可以自己去查看：
- CSSStyleRule
- CSSImportRule
- CSSMediaRule
- CSSFontFaceRule
- CSSPageRule
- CSSKeyframesRule
- CSSKeyframeRule
- CSSNamespaceRule
- CSSSupportsRule
- CSSCounterStyleRule
总结
本文主要介绍了css样式规则的类型，以及它们的属性，这次只是一次扩展阅读，大家可以自己去查看，毕竟这些规则并不常用。
本人也只是刚研究了一下，有不对的地方欢迎大家指正。
