本文目录一览：
- 1、如何实现动态导入js和css等静态资源文件
- 2、如何动态加载外部CSS与JS文件
- 3、如何实现JavaScript动态加载CSS和JS文件
- 4、外部js怎么引用css？
如何实现动态导入js和css等静态资源文件
/**
* 动态导入静态资源文件js/css
*/
var $import = function(){
return function(rId, res, callback){
if(res 'string' == typeof res){
if(rId){
if($($('#' + rId), $('head')).length0){
return;
}
}
//加载资源文件
var sType = res.substring(res.lastIndexOf('.') + 1);
// 支持js/css
if(sType ('js' == sType || 'css' == sType)){
var isScript = (sType == 'js');
var tag = isScript ? 'script' : 'link';
var head = document.getElementsByTagName('head')[0];
// 创建节点
var linkScript = document.createElement(tag);
linkScript.type = isScript ? 'text/javascript' : 'text/css';
linkScript.charset = 'UTF-8';
if(!isScript){
linkScript.rel = 'stylesheet';
}
isScript ? linkScript.src = res : linkScript.href = res;
if(callback 'function' == typeof callback){
if (linkScript.addEventListener){
linkScript.addEventListener('load', function(){
callback.call();
}, false);
} else if (linkScript.attachEvent) {
linkScript.attachEvent('onreadystatechange', function(){
var target = window.event.srcElement;
if (target.readyState == 'complete') {
callback.call();
}
});
}
}
head.appendChild(linkScript);
}
}
};
}();
如何动态加载外部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 )
}
}
如何实现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");
外部js怎么引用css？
你说的是用jQuery里的addClass方法吧（抱歉js原生暂时没发现该方法），那就要先引入jQuery.js，然后再引入a.js,可以这样做:
1、在c.css里写好你的样式：.cssStyle {你的样式};
2、然后在a.js里加入$('span').addClass('cssStyle')即可。
如果你的意思不是这个，那我猜你应该是想说怎么直接在js里操作css样式吧，那就可以这样：
var spanEl = document.querySelectorAll('span');
然后根据你的要求写样式，比如你要修改背景颜色为红色：
spanEl .style.background = ‘red’;
希望我的回答能帮助到你，谢谢！