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

代码：

var dynamicLoading = {

css: function(path){

if(!path || path.length === 0){

throw new Error('argument "path" is required !')

}

var head = document.getElementsByTagName('head')[0]

var link = document.createElement('link')

link.href = path

link.rel = 'stylesheet'

link.type = 'text/css'

head.appendChild(link)

},

js: function(path){

if(!path || path.length === 0){

throw new Error('argument "path" is required !')

}

var head = document.getElementsByTagName('head')[0]

var script = document.createElement('script')

script.src = path

script.type = 'text/javascript'

head.appendChild(script)

}

}

对象包含两个完全独立的方法，分别用来加载CSS 文件和JS 文件，参数均为欲加载的文件路径。原理非常的简单：对于不同的加载文件类型创建不同的节点，然后添加各自的属性，最后扔到head 标签里面。经测试，本方法兼容各浏览器，安全、无毒、环保，是 web 开发人员工作常备代码。

下面是调用代码，异常简单：

//动态加载 CSS 文件

dynamicLoading.css("test.css")

//动态加载 JS 文件

dynamicLoading.js("test.js")

1、将你的模板放到"templets"文件夹中。

2、注意这里的"templets"目录不是"dede/templets"目录，是根目录下的"templets"目录。

3、将HTML文件的后缀改成".htm"。

4、在原先的样式路径前加上这句话“{dede:global.cfg_templets_skin/}”就可以了。

1、两种加载css/js文件，分别是相对路径和绝对路径。

2、相对路径是相对网站根目录的路径也就是index.php所在的路径

3、绝对路径可以使用config.php中base_url配置

4、举例：static是根目录下的文件夹，存放静态文件

相对：

<script src="static/js/web.js"></script>

<link rel="stylesheet" type="text/css" href="static/css/style.css">

绝对：

首先php获取base_url的值

$base_url = $this->config->item('base_url')

//通过参数传递到html页面

$this->load->view('index', array('base_url'=>$base_url))

//页面中使用

<script src="<?php echo $base_url?>static/js/web.js"></script>

<link rel="stylesheet" type="text/css" href="<?php echo $base_url?>static/css/style.css">

---