JS之DOM篇-脚本化样式表

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

JS之DOM篇-脚本化样式表

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>

JS之DOM篇-脚本化样式表

除了使用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>

JS之DOM篇-脚本化样式表

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>  

JS之DOM篇-脚本化样式表

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>

JS之DOM篇-脚本化样式表

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>
上一篇:克隆主机之后ping不通百度


下一篇:PHP 动态获取数组索引的值