使用javascript插入样式

当我们需要动态生成页面上的style标签中的CSS代码时，可以通过以下步骤实现：

1. 创建一个style元素。

2. 设置style元素的CSS代码。

下面是一个简单的示例函数，展示了如何添加CSS样式：

```javascript

function addCSS(cssText) {

var style = document.createElement('style'); // 创建style元素

var head = document.head || document.getElementsByTagName('head')[0]; // 获取head元素

style.type = 'text/css'; // 设置type属性

if (style.styleSheet) { // 针对IE浏览器

try {

style.styleSheet.cssText = cssText; // 设置css文本

} catch (e) {

// 处理异常

}

// 如果styleSheet无法使用，则异步尝试设置

if (style.styleSheet.disabled) {

setTimeout(function() {

style.styleSheet.cssText = cssText;

}, 10);

} else {

style.styleSheet.cssText = cssText; // 直接设置css文本

}

} else { // 针对其他浏览器

var textNode = document.createTextNode(cssText); // 创建文本节点

style.appendChild(textNode); // 将文本节点添加到style元素中

}

head.appendChild(style); // 将style元素添加到head中

}

动态样式导入

在网页开发中，我们经常需要动态地添加样式表。下面是一种使用JavaScript实现动态导入内联样式的方法：

代码示例：

```javascript

function importStyle(css) {

var styleElement = document.createElement("style");

var headElement = document.getElementsByTagName("head")[0];

headElement.appendChild(styleElement);

if (styleElement.styleSheet) {

styleElement.styleSheet.cssText = css;

} else {

styleElement.appendChild(document.createTextNode(css));

}

}

importStyle('h1 { background: red; }'); // 使用示例

```

通过这个函数，你可以轻松地将CSS样式直接嵌入HTML文档的``部分。这对于临时更改样式或动态生成样式非常有用。

Seajs的样式导入封装

对于使用SeaJS来管理你的前端资源，你可以更进一步地封装上述功能：

代码示例：

```javascript

seajs.importStyle = function(css) {

var styleElement = document.createElement("style");

var headElement = document.getElementsByTagName("head")[0];

headElement.appendChild(styleElement);

if (styleElement.styleSheet) {

styleElement.styleSheet.cssText = css;

} else {

styleElement.appendChild(document.createTextNode(css));

}

};

```

这样，你就可以通过SeaJS来动态加载和管理样式资源了。这只是其中一种方法。在实际开发中，我们还可以使用其他方法来实现样式的动态导入。接下来我们介绍另一种常见的方法。