玩转原生JS：如何添加和修改CSS样式——第三部分：操作样式表

最编程 2024-08-10 11:41:50

...

既然行内样式可读可写，计算过后的样式属性也可读；
那么样式表中的样式规则也应该可以被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

上一篇：使用Nginx将.js和.css文件转换为纯文本类型

下一篇：玩转CSS文本装饰特效的方法

玩转原生JS：如何添加和修改CSS样式——第三部分：操作样式表

样式表（CSSStyleSheet）一般分为两种：

如何读取样式表？

1. 获取页面中样式表列表

2. 提取其中内嵌样式表对象 （style标签样式）

3. link的样式表不仅可以按上面方式获取到，还可以这样获取：

4. 取出规则列表

5.我们可以取得第二条规则, 然后就可以取style里面的样式

如何在样式表中设置样式？

1. 通过 CSSStyleRule.style设置样式

2. 创建新的规则

3. 删除规则

玩转原生JS：如何添加和修改CSS样式——第三部分：操作样式表

2. 提取其中内嵌样式表对象（style标签样式）