html颜色主题,网页自定义主题色方案

前言

大家应该见过不少可以更换主题或主题颜色的网站，如果是更换内置的几套方案可以直接通过简单的替换css文件来实现，我们就不说了；本文就介绍一种用户自定义替换的主题题色的简单方案！

1. 相关知识点

1.1 CSSStyleSheet.insertRule()

CSSStyleSheet.insertRule(rule, index);

参数：

rule: string,包含要插入的样式规则

index: number, 插入的位置, 可选，默认:0

document.styleSheets[0].insertRule('.selector {color: red}', 0);

1.2 CSSStyleSheet.addRule()

CSSStyleSheet.addRule(selector, cssText, index)

参数：

selector: string,选择器文本

rule: string,包含要插入的样式规则

index: number, 插入的位置, 可选，默认:length - 1

document.styleSheets[0].addRule('.selector', 'color: red', 0);

关于insertRule与addRule的区别

addRule是IE专用的方法

传参略有不同，并且insert