一般样式代码会在文档开头引入, 随文档加载时同步加载
无论用户该次操作是否用得到, 样式代码都会全部加载进来
但是想要异步加载 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