JS里如何引入CSS文件

CSS文件是用来定义网页样式的文件，它可以让网页的布局、颜色、字体、动画等更加美观和一致。通常，我们会在HTML文件中使用<link>标签或者<style>标签来引入CSS文件，但是有时候我们也需要在JS文件中动态地引入CSS文件，比如根据用户的选择或者浏览器的类型来加载不同的CSS文件。那么，JS里如何引入CSS文件呢？在本文中，我们将介绍几种常用的方法。

方法一：使用document.write方法

这种方法是最简单的一种，就是在JS文件中使用document.write方法来输出一个<link>标签，指定CSS文件的路径。例如：

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

这样就可以在JS文件中引入名为main.css的CSS文件。但是这种方法有一个缺点，就是它会覆盖掉原来页面中的所有内容，所以只能在页面加载之前使用。

方法二：使用createElement方法

这种方法是比较推荐的一种，就是在JS文件中使用document.createElement方法来创建一个<link>标签，然后使用setAttribute方法来设置它的属性，最后使用document.body.appendChild方法或者其他插入节点的方法来把它加入到页面中。例如：

var link = document.createElement('link'); //创建link标签
link.setAttribute('rel', 'stylesheet'); //设置rel属性
link.setAttribute('href', 'main.css'); //设置href属性
document.body.appendChild(link); //把link标签加入到body中

这样就可以在JS文件中引入名为main.css的CSS文件。这种方法的优点是它不会影响原来页面中的内容，而且可以在任何时候使用。

方法三：使用insertAdjacentHTML方法

这种方法是比较新的一种，就是在JS文件中使用insertAdjacentHTML方法来把一个字符串作为HTML代码插入到指定元素的指定位置。例如：

var link = '<link rel="stylesheet" href="main.css">'; //定义link标签字符串
document.body.insertAdjacentHTML('beforeend', link); //把link标签插入到body的末尾

这样就可以在JS文件中引入名为main.css的CSS文件。这种方法的优点是它可以灵活地控制插入位置和元素，而且比较简洁。

总结

JS里引入CSS文件有多种方法，我们可以根据不同的需求和场景来选择合适的方法。一般来说，使用createElement方法或者insertAdjacentHTML方法比较好，因为它们不会覆盖原来页面中的内容，而且可以在任何时候使用。当然，如果你只需要在页面加载之前引入CSS文件，也可以使用document.write方法。

参考资料 (1) JS里如何引入CSS文件-Web前端之家. https://bing.com/search?q=js+css%e6%96%87%e4%bb%b6%e5%bc%95%e5%85%a5%e6%96%b9%e6%b3%95. (2) [译] Javascript 应用中引入 CSS 的几种方式 - 掘金. https://juejin.cn/post/6867054761741549576. (3) js中如何引入css文件？ - 知乎. https://zhuanlan.zhihu.com/p/393882402. (4) JS里如何引入CSS文件-Web前端之家. https://www.jiangweishan.com/article/js400234909349509.html.