神奇的 CSS 变色小提琴：
http://fiddle.jshell.net/8xkv3/3/
关键思想是访问 CSS 对象模型中的最后一个样式表，并在该样式表末尾添加 CSS 规则，指定所需选择器的属性。你想要的last的规则last样式表，以便它覆盖级联中的其他任何内容（当然，内联样式除外）。
The 样式表对象该文件有效的列表可在document.styleSheets。每个人都有自己的财产cssRules这是一个规则列表，每个规则代表一个选择器加上一个属性值对列表。
The stylesheet.insertRule()方法从字符串创建新规则，并将其添加到工作表的指定索引处。不幸的是，它只返回索引，而不是规则对象，因此我们必须重新选择它以保存以供将来修改。
您可以重复添加新规则，每个规则都会覆盖之前的规则，但这不是很有效。规则对象有一个“样式”映射，其中的键和值的行为与您的预测非常相似。
Edit
我意识到上述方法有问题。如果当前网页未使用列表中的最后一个样式表，会发生什么情况？如果它是打印样式表怎么办？或者用于小屏幕、语音合成器或任何其他媒体查询受限情况的样式表？您可以向该样式表对象添加规则，但它不会产生任何效果。
显然，您需要做的是创建一个new样式表对象没有任何限制和/或仅具有您选择的限制。然后，您可以将此样式表添加到列表末尾，并向其中添加动态样式规则。
您不能直接创建样式表对象，但可以创建<style>元素并将其添加到 DOM 中的 html head 对象。当。。。的时候<style>对象被添加到文档中将为它创建一个样式表对象，并且可以访问为.sheet元素的属性.
修改后的小提琴在这里：http://fiddle.jshell.net/8xkv3/6/
关键代码：
if (!rule) {
//create a new page-wide style element
var styleElement = document.createElement("style");
styleElement.type = "text/css";
//probably not necessary (CSS is default),
//but it doesn't hurt to be explicit
document.head.insertBefore(styleElement, null);
//once inserted in the document, a valid
//CSSStyleSheet object is created and attached
//to the styleElement object
var styleSheet = styleElement.sheet;
var ruleNum = styleSheet.cssRules.length;
//console.log(styleSheet);
styleSheet.insertRule(
".changeable{color:#"+hex[1]+";}",
ruleNum);
rule = styleSheet.cssRules[ruleNum];
//console.log(rule);
}
else {
rule.style["color"] = "#"+hex[1];
};
顺便说一句，我不知道为什么我之前搜索 MDN 时没有出现这个，但是这里有一篇关于动态操作 CSS OM 的各种方法的好文章：
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_dynamic_styling_information
