JavaScript动态插入CSS的方法

一、理解现有的样式表

我们先来了解一下`document.styleSheets`。当你打开任意页面时，它包含了该页面所有的样式表信息。其中，前三个通常是通过link标签引入的外部CSS文件，而第四个则是通过style标签内联在HTML页面中的样式。每一个样式表都有一些重要的属性，其中每一个cssRule又有更多的子属性。特别地，cssRule的cssText属性正是我们写在style标签中的源代码。

```javascript

function createStyleSheet() {

var head = document.head || document.getElementsByTagName('head')[0];

var style = document.createElement('style');

style.type = 'text/css';

head.appendChild(style);

return style.sheet || style.styleSheet;

}

```

```javascript

function addCssRule(selector, rules, index) {

index = index || 0;

if (sheetsertRule) {

sheetsertRule(selector + "{" + rules + "}", index);

} else if (sheet.addRule) {

sheet.addRule(selector, rules, index);

}

}

```

考虑到不同浏览器对于 style 元素的支持可能存在差异，我们在创建 stylesheet 对象时进行了兼容性处理，以确保代码可以在不同的浏览器中正常运行。我们还提供了判断 IE 低版本的支持，虽然现代浏览器大多已经淘汰了 IE，但在某些特殊环境下可能仍然需要使用到 IE。

如果只针对移动端或现代浏览器进行开发，我们可以去掉针对 IE 的判断和处理，使代码更加简洁。但无论如何，我们都要确保代码的兼容性和稳定性。