js 插入公共 css, 异步加载 css

一般样式代码会在文档开头引入, 随文档加载时同步加载
无论用户该次操作是否用得到, 样式代码都会全部加载进来

但是想要异步加载 css, 或者插入一段新生成的 css, 也是有办法可以实现的

插入公共 css 代码块

• 用 createElement 一个 style 节点
• 用 innerHTML 进需要的css代码
• 用 body.appendChild 插入 head 中即可

var new_element = document.createElement("style");
new_element.innerHTML = ("* { font-size: 28px; }");
document.head.appendChild(new_element);

*原 js 插入公共css的方法 的内容

---

插入一个 link 引用

• 用 createElement 一个 link 节点
• 设置想加载的 css 文件地址, 及有关属性
• 用 body.appendChild 插入 head 中即可

var new_element = document.createElement("link");
new_element.rel = "stylesheet"
new_element.type = "text/css"
new_element.href = "css/scss.css"
document.head.appendChild(new_element);

---

两个方法原理差不多, 但性质不一样
前者是插入不存在的样式, 例如用户选择了 色系, 亮度, 主色等时候使用
后者是将设计好的样式, 以异步的方式加入到文档当中

end