本文总结了在 JavaScript 中动态加载 CSS 文件的三种主要方法。包括通过 @import 在 CSS 内部引用、利用 document.createStyleSheet 创建样式表，以及使用 createElement 动态生成 link 标签并插入 DOM。此外，还提供了封装好的 loadCss 函数示例，用于实现可复用的样式表动态加载逻辑。
@import 方式
@import url(style.css);
此方法仅适用于 CSS 文件内部或 style 标签中使用。
2. 在页面中简单加载一个外部 CSS 文件
createStyleSheet 方式
document.createStyleSheet(cssFile);
createElement 动态创建 Link 标签
第二种方法是通过 createElement 创建 CSS 的 Link 标签。
var head = document.getElementsByTagName('HEAD').item(0);
var style = document.createElement('link');
style.href = 'style.css';
style.rel = 'stylesheet';
style.type = 'text/css';
head.appendChild(style);
以下是两个常用的封装函数。
代码如下：
封装动态加载函数function loadJs(file) {
var scriptTag = document.getElementById('loadScript');
var head = document.getElementsByTagName('head').item(0);
if (scriptTag) head.removeChild(scriptTag);
script = document.createElement('script');
script.src = '../js/mi_' + file + '.js';
script.type = 'text/javascript';
script.id = 'loadScript';
head.appendChild(script);
}
} function loadCss(file) {
var cssTag = document.getElementById('loadCss');
var head = document.getElementsByTagName('head').item(0);
if (cssTag) head.removeChild(cssTag);
css = document.createElement('link');
css.href = '../css/mi_' + file + '.css';
css.rel = 'stylesheet';
css.type = 'text/css';
css.id = 'loadCss';
head.appendChild(css);
}