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

动态加载外部css样式及css样式，参考代码如下：

// 动态加载外部js文件

var flag = true

if( flag ){

loadScript( "js/index.js" )

}

function loadScript( url ){

var script = document.createElement( "script" )

script.type = "type/javascipt"

script.src = url

document.getElementsByTagName( "head" )[0].appendChild( script )

}

// 动态加载js

if( flag ){

var script = document.createElement( "script" )

script.type = "text/javascript"

script.text = " "

document.getElementsByTagName( "head" )[0].appendChild( script )

}

// 动态加载外部css样式

if( flag ){

loadCss( "css/base.css" )

}

function loadCss( url ){

var link = document.createElement( "link" )

link.type = "text/css"

link.rel = "stylesheet"

link.href = url

document.getElementsByTagName( "head" )[0].appendChild( link )

}

// 动态加载css样式

if( flag ){

var style = document.createElement( "style" )

style.type = "text/css"

document.getElementsByTagName( "head" )[0].appendChild( style )

var sheet = document.styleSheets[0]

insertRules( sheet,"#gaga1","background:#f00",0 )

}

function insertRules( sheet,selectorTxt,cssTxt,position ){

if( sheet.insertRule ){ // 判断非IE浏览器

sheet.insertRule( selectorTxt + "{" + cssTxt +"}" ,position )

}else if( sheet.addRule ){ //判断是否是IE浏览器

sheet.addRule( selectorTxt ,cssTxt ,position )

}

}

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('div').click(function(){$(this).css('color','blue')})。

3、浏览器运行index.html页面，此时点击123所在的div，div会变为蓝色文本。

---