本文介绍如何使用 JavaScript 动态创建并插入 CSS 样式，涵盖异步加载外部 CSS 文件及内联样式模块两种场景。重点解决了低版本 IE 浏览器中 styleSheet.cssText 的兼容性问题，确保在所有主流浏览器包括 IE 中均能正常应用动态样式。
动态加载 CSS 文件与模块的兼容方案
本文介绍一种在 JavaScript 中动态加载 CSS 文件或 CSS 模块的方法，该方案支持所有主流浏览器，包括 Internet Explorer。实现思路参考自《JavaScript 高级程序设计》一书中的相关章节。
首先，定义 createLink 方法，其核心功能是动态创建一个 link 标签，用于引入外部 CSS 文件，并将该标签插入到文档的 head 部分，从而实现样式的异步加载。
其次，实现 createModule 方法以处理内联样式模块。该方法会创建一个 style 标签并注入页面内容。需要注意的是，在 IE8 及以下版本中，直接设置 cssText 会引发异常。因此，代码通过 try-catch 块进行兼容处理：若抛出异常，则利用 style.styleSheet.cssText 属性来添加样式内容，从而确保在旧版 IE 中也能正常应用样式。
核心代码实现与兼容性处理
<button id="demo">css文件</button>
<button id="demo1">css模块</button>
<script type="text/javascript">
//异步加载css文件，支持所有浏览器
document.getElementById("demo").onclick = function () {
createLink("../../css/demo.css");
}
function createLink(src) {
var link = document.createElement("link");
link.rel = "stylesheet"
link.type = "text/css";
link.href = src;
document.getElementsByTagName("head")[0].appendChild(link);
}
//IE将<style>视为一个特殊的与<script>类似的节点，不允许其访问子节点，事实上，IE此时抛出的错误与向<script>元素添加子节点时抛出的错误相同，
//解决IE中的这个问题的办法就是访问元素的styleSheet属性，该属性又有一个CSSText属性，可以接受css代码
document.getElementById("demo1").onclick = function () {
createModule("body{background:green;}");
}
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);
}
</script>以上即为 JavaScript 动态添加样式的完整实现逻辑与代码示例，希望能帮助开发者解决跨浏览器的样式动态加载问题。