如何实现JavaScript动态加载CSS和JS文件

实现JavaScript动态加载CSS和JS文件通常通过动态创建HTML元素来实现。

一、动态加载CSS文件

1. 创建一个link元素

通过JavaScript动态创建一个link元素，并将其属性设置为需要加载的CSS文件路径。

<link id="dynamic-css" rel="stylesheet" type="text/css" href="">

let link = document.getElementById('dynamic-css');
link.href = 'path/to/your/css/file.css'

1. 将link元素插入到页面

通过JavaScript获取head元素，动态将link元素插入到head元素中。

document.getElementsByTagName('head')[0].appendChild(link);

完整的代码如下：

let link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'path/to/your/css/file.css';
link.id = 'dynamic-css'; // 可选

document.getElementsByTagName('head')[0].appendChild(link);

二、动态加载JS文件

1. 创建一个script元素

通过JavaScript动态创建一个script元素，并将其属性设置为需要加载的JS文件路径。

<script id="dynamic-js" src=""></script>

let script = document.getElementById('dynamic-js');
script.src = 'path/to/your/js/file.js';

1. 将script元素插入到页面

通过JavaScript获取head或body元素，动态将script元素插入到其中。

document.getElementsByTagName('head')[0].appendChild(script);

完整的代码如下：

let script = document.createElement('script');
script.src = 'path/to/your/js/file.js';
script.id = 'dynamic-js'; // 可选

document.getElementsByTagName('head')[0].appendChild(script);

三、示例

1. 动态加载CSS文件

let link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'path/to/your/css/file.css';
link.id = 'dynamic-css';

document.getElementsByTagName('head')[0].appendChild(link);

1. 动态加载JS文件

let script = document.createElement('script');
script.src = 'path/to/your/js/file.js';
script.id = 'dynamic-js';

document.getElementsByTagName('body')[0].appendChild(script);