在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>