既然行内样式可读可写，计算过后的样式属性也可读；
那么样式表中的样式规则也应该可以被JS修改
这篇主要是简单教大家如何读取样式表中的样式、以及如何修改样式表
样式表（CSSStyleSheet）一般分为两种：
- <link> 元素包含的样式表（HTMLLinkElement）
<link rel="stylesheet" href="./index.css">
// index.css
div {
background-color: blue;
border: 10px solid #ccc;
}
p {
color: white;
background-color: orangered;
}
- <style> 元素中定义的样式表（HTMLStyleElement）
<style>
div {
width: 100px;
line-height: 100px;
background-color: red;
border: 6px solid #ccc;
text-align: center;
}
</style>
应用于文档的所有样式表是可以通过 document.styleSheets 集合来表示的。通过这个集合的 length属性可以获知文档中样式表的数量，而通过方括号语法或 item() 方法可以访问到每一个样式表对象
HTML
<body>
<div style="color: blue; background-color: yellow !important;">假装有内容</div>
<p>段落标签！</p>
</body>
内部样式表
<style>
div {
width: 100px;
line-height: 100px;
background-color: red;
border: 6px solid #ccc;
text-align: center;
}
</style>
外链样式表：
<link rel="stylesheet" href="./index.css">
// index.css
div {
background-color: blue;
border: 10px solid #ccc;
}
p {
color: white;
background-color: orangered;
}
如何读取样式表？
1. 获取页面中样式表列表
console.log(document.styleSheets);
styleSheetList.PNG
2. 提取其中内嵌样式表对象 （style标签样式）
var sheet = document.styleSheets[1] || document.styleSheets.item(1);
console.log(sheet);
image.png
3. link的样式表不仅可以按上面方式获取到，还可以这样获取：
var linkStyle = document.getElementsByTagName("link")[0];
// 提取样式表对象
var sheet = linkStyle.sheet || linkStyle.styleSheet; // IE浏览器为styleSheet
console.log(sheet);
PS: Chrome 浏览器在本地运行时会出现问题，cssRules 是个错误，需要把它放到服务器上运行
image.png
火狐上是没有问题的~
image.png
4. 取出规则列表
var rules = sheet.cssRules || sheet.rules; // IE浏览器为rules
console.log(rules);
image.png
CSSRules对象表示样式表中的每一条规则，实际上CSSRule是一个供其他多种类型继承的基本类型，其中最常见的就是 CSSStyleRule 类型，表示样式信息
5.我们可以取得第二条规则, 然后就可以取style里面的样式
var rule = rules[1];
console.log(rule);
console.log(rule.style.color); // white
image.png
如何在样式表中设置样式？
1. 通过 CSSStyleRule.style设置样式
rule.style.backgroundColor = 'orange';
rule.style.color = 'white';
ruleStyle-set.gif
2. 创建新的规则
// 创建新规则
sheet.insertRule('body { background-color: skyblue; }', 0);
// sheet.addRule("body", "background-color: skyblue", 0); // IE
console.log(rules)
image.png
兼容写法
/**
*
* @param {*} sheet 样式表对象
* @param {*} selectorText 选择器
* @param {*} cssText 样式字符串（行内样式写法即可）
* @param {*} position 插入表中位置
*/
function insertRule(sheet, selectorText, cssText, position) {
if (sheet.insertRule) {
sheet.insertRule(selectorText + "{" + cssText + "}", position);
} else if (sheet.addRule) {
sheet.addRule(selectorText, cssText, position);
}
}
3. 删除规则
sheet.deleteRule(0);
// sheet.removeRule(0); // IE方法
console.log(rules);
deleteRule.gif
兼容写法：
/**
*
* @param {*} sheet 样式表对象
* @param {*} index 表中位置下标
*/
function deleteRule(sheet, index) {
if (sheet.deleteRule) {
sheet.deleteRule(index);
} else if (sheet.removeRule) {
sheet.removeRule(index);
}
}
三种方式总算是写完了~
上上篇：原生JS获取及设置样式-1.行内样式
上一篇： 原生JS获取样式-2.计算属性getComputedStyle
timg.jpg
网友评论