JS之DOM篇-脚本化样式表

在HTML中引入CSS有三种方式：行内样式、内部样式、外部样式。内部样式和外部样式分别是通过<style>和<link>标签引入的，它们都属于CSSStyleSheet类型。前文介绍的行内样式属于CSSStyleDeclaration类型

CSSStyleSheet

CSSStyleSheet是一个继承自StyleSheet的类数组对象。通过document.styleSheets可以获取这个类数组对象，它的length属性表示样式表的数量，可以通过方括号语法或者item()方法访问其中的样式表

<style id="t1"></style>
<script>
  console.log(document.styleSheets[0] instanceof CSSStyleSheet);
  console.log(document.styleSheets[0] instanceof StyleSheet);
</script>

<style id="t1"></style>
<link rel="stylesheet" href="./style.css" id="t2">

<script>
  console.log(document.styleSheets.length); // 2
  console.log(document.styleSheets[0]);
  console.log(document.styleSheets[1]);
</script>

除了使用document.styleSheets，也可以通过<link>或<style>元素的sheet属性，取得CSSStyleSheet对象

<style id="t1"></style>
<link rel="stylesheet" href="./style.css" id="t2">

<script>
  console.log(t1.sheet);
  console.log(t2.sheet);
  console.log(t1.sheet === document.styleSheets[0], t2.sheet === document.styleSheets[1]); // true true
</script>

继承属性

CSSStyleSheet继承了StyleSheet的以下属性：

disabled

disabled表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为true可以禁用样式表

<style id="t1">
  #test {
    color: red;
  }
</style>
<div id="test">测试文字</div>
<button id="btn">变色</button>
<script>
  btn.onclick = function() {
    document.styleSheets[0].disabled = !document.styleSheets[0].disabled
  }
</script>

href

如果样式表是通过包含的，则表示样式表的URL；否则，是null

<style id="t1"></style>
<link rel="stylesheet" href="./style.css" id="t2">
<script>
  console.log(document.styleSheets[0].href) // null
  console.log(document.styleSheets[1].href) // file:///C:/Users/dell/Desktop/demo/style.css
</script>

media

media属性表示当前样式表支持的所有媒体类型的集合MediaList，它也是一个类数组对象，拥有item()方法和length属性。如果集合是空列表，表示样式表适合所有媒体

<style media="screen and (min-width: 375px)">
  #test {
    color: red;
  }
</style>
<script>
  console.log(document.styleSheets[0].media); // screen and (min-width: 375px)
</script>

ownerNode

ownerNode属性返回StyleSheet对象所在的DOM节点

<style id="t"></style>
<script>
  console.log(document.styleSheets[0].ownerNode); // <style id="t"></style>
</script>

parentStyleSheet

parentStyleSheet表示当前样式表是通过@import导入的情况下，这个属性是一个指向导入它的样式表的指针；否则为null

<style id="t"></style>
<script>
  console.log(document.styleSheets[0].parentStyleSheet); // null
</script>

title

title属性表示ownerNode中title属性的值

<style id="t" title="test"></style>
<script>
  console.log(document.styleSheets[0].title); // 'test'
</script>

type

type属性表示样式表类型的字符串。如果省略type属性，默认是'text/css'

<style id="t" title="test"></style>
<script>
  console.log(document.styleSheets[0].type); // 'text/css'
</script>

自有属性

cssRules

cssRules属性表示样式表中包含的样式规则的集合

<style>
.box{
  color: blue;
}
.test{
  color: red;
}
</style>
<script>
// CSSRuleList {0: CSSStyleRule, 1: CSSStyleRule, length: 2}
console.log(document.styleSheets[0].cssRules);
</script>  

ownerRule

如果样式表是通过@import导入的，ownerRule属性就是一个指针，指向表示导入的规则；否则，值为null

<style> </style>
<script>  
  console.log(document.styleSheets[0].ownerRule);// null
</script>

方法

CSSStyleSheet对象的方法有insertRule()和deleteRule()，都用于操作CSSRule对象。下面把它们放在CSSRule对象的部分进行介绍

CSSRule对象

CSSRule对象是一个供其他多种类型继承的基类型，它表示样式表中的每一条规则。比如表示样式信息的CSSStyleRule类型，其他还有@import、@font-face、@page和@charset都继承自这个基类

属性

cssText

cssText属性返回整条规则对应的文本

<style id="t">
  .box {
    color: red;
    font-size: 16px;
  }
</style>
<script>
  var rules = t.sheet.cssRules;
  console.log(rules[0].cssText); // .box { color: red; font-size: 16px; }
</script>

style

style属性返回一个CSSStyleDeclaration对象，通过它设置和取得规则中特定的样式值

该CSSStyleDeclaration对象与行内元素的CSSStyleDeclaration对象类似，具有相似的属性和方法。关于行内元素的CSSStyleDeclaration对象介绍移步至此

<style id="t">
  .box {
    color: red;
    font-size: 16px;
  }
</style>
<script>
  var rules = t.sheet.cssRules;
  console.log(rules[0].style);
</script>

selectorText

selectorText属性返回当前规则的选择符文本

<style id="t">
  .box {
    color: red;
    font-size: 16px;
  }
</style>
<script>
  var rules = t.sheet.cssRules;
  console.log(rules[0].selectorText); // '.box'
</script>

parentRule

如果当前规则是导入的规则，这个属性引用的就是导入规则；否则，这个值为null

<style id="t">
  .box {
    color: red;
    font-size: 16px;
  }
</style>
<script>
  var rules = t.sheet.cssRules;
  console.log(rules[0].parentRule); // null
</script>

parentStyleSheet

parentStyleSheet属性表示当前规则所属的样式表

<style id="t">
  .box {
    color: red;
    font-size: 16px;
  }
</style>
<script>
  var rules = t.sheet.cssRules;
  console.log(rules[0].parentStyleSheet); // null
</script>

type

type属性返回有一个整数值，表示当前规则的类型

<style id="t">
  .box {
    color: red;
    font-size: 16px;
  }
</style>
<script>
  var rules = t.sheet.cssRules;
  console.log(rules[0].type); // 1
</script>

常见类型有以下几种：

1：样式规则，部署了CSSStyleRule接口
3：输入规则，部署了CSSImportRule接口
4：Media规则，部署了CSSMediaRule接口
5：字体规则，部署了CSSFontFaceRule接口

方法

CSSStyleRule对象本身并没有方法，操作CSSStyleRule对象的方法位于CSSStyleSheet对象中

insertRule()

insertRule(rule, index)方法表示向cssRules集合中指定的位置插入rule字符串，并返回当前样式表的索引值

<style id="t">
  .box {
    color: red;
  }
</style>
<div class="box">测试文字</div>
<button id="btn">变色</button>
<script>
  var rules = t.sheet.cssRules;
  console.log(rules[0].cssText)
  btn.onclick = function() {
    t.sheet.insertRule('div {color: blue}', 0);
    console.log(rules[0].cssText)
  }
</script>

deleteRule()

deleteRule(index)方法删除cssRules集合中指定位置的规则，无返回值

<style id="t">
  .box {
    color: blue;
  }
</style>
<div class="box">测试文字</div>
<button id="btn">变色</button>
<script>
  var rules = t.sheet.cssRules;
  console.log(rules[0].cssText); // .box { color: blue; }
  btn.onclick = function() {
    t.sheet.deleteRule(0);
    console.log(rules[0].cssText); // 报错，因为已经删除了
  }
</script>