原生js获取class增加CSS样式,原生JS获取及设置CSS样式-3.操作样式表

既然行内样式可读可写，计算过后的样式属性也可读；

那么样式表中的样式规则也应该可以被JS修改

这篇主要是简单教大家如何读取样式表中的样式、以及如何修改样式表

样式表(CSSStyleSheet)一般分为两种：

元素包含的样式表(HTMLLinkElement)

// index.css

div {

background-color: blue;

border: 10px solid #ccc;

}

p {

color: white;

background-color: orangered;

}

div {

width: 100px;

line-height: 100px;

background-color: red;

border: 6px solid #ccc;

text-align: center;

}

应用于文档的所有样式表是可以通过 document.styleSheets 集合来表示的。通过这个集合的 length属性可以获知文档中样式表的数量，而通过方括号语法或 item() 方法可以访问到每一个样式表对象

HTML

假装有内容

段落标签！

内部样式表

div {

width: 100px;

line-height: 100px;

background-color: red;

border: 6px solid #ccc;

text-align: center;

}

外链样式表：

// 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);

}

}

timg.jpg