動態引用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』;

希望我的回答能幫助到你，謝謝！