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

运用js操作款式咱们一般操作的是domstyle特点,也便是咱们所说的行内款式,那么有没有一种方法能够操作css文件中的款式呢?答案是必定的,咱们能够运用cssom来操作css文件中的款式。

1. cssom

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

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