JavaScript 动态加载 CSS 的几种实现方式

@import 方式

@import url(style.css);

此方法仅适用于 CSS 文件内部或 style 标签中使用。

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);
}