用 JS 把 CSS 引入网页的两种方式

CSS 一般用 link 标签写在 head 里。有些场景希望由 JS 来引入：晚一点再加载样式，或者运行时切换主题。引入的方式有两种。

方式一：document.write

在 HTML 文件的 head 标签之间添加：

<script>
    document.write('<link rel="stylesheet" href="main.css">');
</script>

直接用 document.write 输出引入 css 的 link 标签 HTML 代码。简单，但只能在文档解析阶段用；页面加载完成之后再 write 会重写整个文档。

方式二：createElement

在 HTML 文件的 body 标签之间添加：

<script>
    new_element = document.createElement('link');
    new_element.setAttribute('rel', 'stylesheet');
    new_element.setAttribute('href', 'main.css');
    document.body.appendChild(new_element);
</script>

利用 document.createElement(‘link’) 生成一个 link 标签，设置其 rel 属性为 stylesheet、href 为 main.css，最后把这个标签动态加入 body 中。它是普通 DOM 操作，任何时机都能执行。

怎么选

静态页面图省事可以用 write；动态加载样式用 createElement，这也是运行时注入样式的标准做法。两种方式最终插入的是同一个 link 标签，区别只在介入时机。