在前端web页面中加载css样式文件是直接写死的,但如果我们需要利用一些判断条件来加载css文件该如何做呢?那下面就来说说利用js脚本来动态加载css文件的方法。

js动态加载css样式文件的方法

例:

js代码:

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://www.feiniaomy.com/style.css'; //这里是CSS文件的地址
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);

代码解释:

1、使用 js 脚本中的 createElement 方法创建一个link标签HTML元素

2、给创建的 link 元素加入一些属性

3、将创建好的HTML元素插入到文档中的 head 标签中