动态引用css和js（用css实现动态背景）

• 1、如何实现动态导入js和css等静态资源文件
• 2、如何动态加载外部CSS与JS文件
• 3、如何实现JavaScript动态加载CSS和JS文件
• 4、外部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样式及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 ) 

} 

}

代码：

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”);

你说的是用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’;

希望我的回答能帮助到你，谢谢！