原生js——动态引入外部js、css文件

男孩子小杨

已于 2024-12-31 18:06:17 修改

阅读量5.6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：原生js 文章标签：原生js——动态引入外部js、css文件引入js脚本文件引入外部css文件

于 2019-04-27 15:55:35 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43495629/article/details/89602153

原生js 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何使用原生JS动态加载外部JS和CSS文件的方法，包括创建和添加元素的步骤。详细解释了函数的实现，并指出JS文件可以放置在head或body标签内，而CSS文件仅限于head标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生js——动态引入外部js、css文件

把其写成自定义函数（url为文件路径）供以后的元素调用：

	//加载外部css文件
	function dynamicLoadCss(url) {
		var head = document.getElementsByTagName('head')[0];
		var link = document.createElement('link');
		link.type='text/css';
		link.rel = 'stylesheet';
		link.href = url;
		head.appendChild(link);
	}
			
	dynamicLoadCss("文件路径");  //自动调用函数;

	//加载外部js文件
	function dynamicLoadJs(url) {
		var head = document.getElementsByTagName('head')[0];
		var script = document.createElement('script');
		script.type='text/jajvascript';
		script.href = url;
		head.appendChild(script);
	}
			
	dynamicLoadCss("文件路径");  //自动调用函数;

注：
js脚本文件具体是放在head标签里面,还是放在body标签里面，可根据开发需要来进行选择;

更详细的介绍请查看：
link(https://blog.youkuaiyun.com/lumeier/article/details/46398009)

用到的主要知识点就是：元素的创建、元素的添加
```
	document.createElement("元素名称");
```
```
	document.createElement("元素名称");
```
其实，外部引入js脚本文件，或者外部css样式，方法大同小异。

只是外部引入css文件只能放在head标签以内，而js既可以放在head标签以内，还可以放在body标签以内，又可以放在html标签以外。