来认识一下 styleSheets，好像有点高级的样子

继续创造，加速成长！这是我参与「日新方案 10 月更文挑战」的第7天，点击检查活动概况

运用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款式规矩的类型，以及它们的特点，这次仅仅一次扩展阅览，我们能够自己去检查，究竟这些规矩并不常用。

自己也仅仅刚研究了一下，有不对的地方欢迎我们纠正。