js實現的動態載入css檔案簡單介紹

動態載入css檔案的應用在很多效果中都有，最典型的一個就是更新網站的皮膚，或者點選一個按鈕實現更換某個功能的樣式等等，數不勝數，總之用的方法就是動態載入css檔案，下面就通過程式碼介紹一下如何實現此功能。

一.引入外部樣式表:

也就是通過javascript動態建立響應的標籤，然後引入外部的樣式表，以達到更改樣式的功能。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function includeLinkStyle(url) {
  var link=document.createElement("link");
  link.rel="stylesheet";
  link.type="text/css";
  link.href=url;
  document.getElementsByTagName("head")[0].appendChild(link);
}

上面的程式碼實現了我們的要求，函式的引數就是要引入的css檔案的路徑。

二.在當前頁面style標籤內寫入樣式:

通常情況下，可能需要更改的樣式程式碼較少，如果單獨引入一個css頁面，可能會感覺有些繁瑣了，還不如直接將程式碼寫入當前頁面的style標籤更好一些，下面就是一段能夠實現此功能的程式碼。

[JavaScript] 純文字檢視 複製程式碼
function includeStyleElement(styles,styleId){
  if(document.getElementById(styleId)){
    return
  }
  var style=document.createElement("style");
  style.id=styleId;
  //這裡最好給ie設定下面的屬性
  /*if (isIE()){
    style.type = "text/css";
    style.media = "screen"
  }*/
  (document.getElementsByTagName("head")[0] || document.body).appendChild(style);
  if(style.styleSheet){ //for ie
    style.styleSheet.cssText = styles;
  } 
  else { //for w3c
    style.appendChild(document.createTextNode(styles));
  }
}
var styles="#div{background-color:#FF3300;color:#FFFFFF}";
includeStyleElement(styles,"newstyle");