异步加载css文件或者异步加载css模块，支持所有浏览器，包括IE，参考至javascript高级编程
1.createLink方法用于创建一个style标签并添加到head标签中
2.createModule方法用于创建一个style样式表的标签，并且如果在IE8以下的版本运行会抛出异常，在异常捕获模块中执行style.styleSheet.cssText兼容IE添加style的样式内容。
<button id="demo">css文件</button>
<button id="demo1">css模块</button>
<script type="text/javascript"
JavaScript 动态样式添加是网页开发中常见的需求，特别是在实现响应式设计或按需加载CSS资源时。在本文中，我们将深入探讨如何使用JavaScript来异步加载CSS文件和CSS模块，确保兼容所有浏览器，包括IE。
让我们看下如何使用`createLink`方法创建一个新的`<link>`标签并将其添加到`<head>`标签中，以实现异步加载CSS文件。这个方法的基本思路是：
```javascript
function createLink(src) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = src;
document.getElementsByTagName("head")[0].appendChild(link);
}
```
当用户点击具有`id="demo"`的按钮时，会触发`createLink`函数，加载指定路径的CSS文件（例如：`../../css/demo.css`）。
然而，对于Internet Explorer（尤其是IE8及以下版本），`<style>`标签的行为有所不同。在这些浏览器中，直接通过`style.appendChild()`方法添加CSS文本会抛出错误。为了解决这个问题，我们需要利用`styleSheet`属性及其`cssText`属性来设置CSS内容。这是`createModule`方法的工作方式：
```javascript
function createModule(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName("head")[0].appendChild(style);
}
```
当用户点击具有`id="demo1"`的按钮时，`createModule`函数会被调用，它接受一个CSS字符串作为参数，并尝试通过创建文本节点并将其附加到`<style>`元素中。如果在IE中抛出异常，则直接将CSS字符串赋值给`styleSheet.cssText`。
这两个函数展示了JavaScript动态添加CSS的灵活性，它们可以在页面加载后根据需要加载样式，提高用户体验，同时确保兼容性。在实际应用中，你可以根据项目需求调整这些方法，例如添加错误处理、状态检测或者优化加载顺序。
JavaScript动态样式添加是一种强大的技术，它可以让你在不刷新整个页面的情况下更新或添加样式，提高网页的响应性和性能。无论是加载外部CSS文件还是内联CSS模块，都能帮助你更有效地管理网页的样式表现。
