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

html-css010

如何实现JavaScript动态加载CSS和JS文件,第1张

动态加载外部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 )

}

}

不生效的原因定位,可以从以下几点入手: 确认引入的外部CSS文件确实存在,并且引入路径正确 因CSS有引入的先后顺序和效果应用优先级,所以需确保引入的CSS必须放在其他CSS文件或样式的后面 具体的style优先级高于CSS文件的优先级