likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 146

使用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;

后面的就不一一介绍了，毕竟大部分都不常用，大家可以自己去查看：

总结

本文主要介绍了css样式规则的类型，以及它们的属性，这次只是一次扩展阅读，大家可以自己去查看，毕竟这些规则并不常用。

本人也只是刚研究了一下，有不对的地方欢迎大家指正。

转载自:https://juejin.cn/post/7150656938190536711
评论
请登录