JavaScript动态插入CSS的方法

我们来了解一下样式表的基础知识。当我们查看一个网页的document.styleSheets时，可以看到页面上的所有样式表。这些样式表可能是通过link标签引入的外部CSS文件，也可能是内联在style标签中的样式。每一个样式表都由一系列的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) {

// 注意：这是针对IE低版本的写法

sheet.addRule(selector, rules, index);

}

}

```

在现代Web开发中，我们经常需要根据不同的场景动态地添加或修改CSS样式。下面介绍一种使用JavaScript动态添加CSS样式的方法。

我们需要创建一个style元素并将其添加到文档的head中。这样我们就可以通过该style元素的sheet对象来动态添加CSS规则。

```javascript

function createStyleSheet() {

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

style.type = 'text/css';

document.head.appendChild(style);

return style.sheet;

}

```

```javascript

var sheet = createStyleSheet(); // 创建stylesheet对象

var addCssRule = function(selector, rules, index) {

};

```

这样，我们就可以通过调用addCssRule函数来动态添加CSS样式了。例如：

```javascript

addCssRule('.my-class', 'color: red; font-size: 20px;', 0); // 将样式添加到第一个位置

```