javascript動態建立並執行css程式碼例項

在實際應用中，可能需要動態的建立相關的css並執行。

下面分享兩段能夠實現此功能的程式碼，需要的朋友可以做一下參考。

程式碼例項一:

[JavaScript] 純文字檢視 複製程式碼
var flag = true;
if(flag){
  var style = docuemnt.createElement('style');
  style.type = 'text/css';
  document.getElementsByTagName('head')[0].appendChild(style);
  insertRule(document.styleSheets[0],'#box','background:red',0);
}
function insertRule(sheet,selectorText,cssText,position){
  // 如果是非IE;
  if(sheet.insertRule){
    sheet.insertRule(selectorText+"{"+cssText+"}",position);
  // 如果是IE;
  }else if(sheet.addRule){
    sheet.addRule(selectorText,cssText,position);
  }
}

程式碼例項二:

[JavaScript] 純文字檢視 複製程式碼
function loadStyleString(css){
  var style = document.createElement("style");
  style.type = "text/css";
  try{
    // IE會報錯;不允許向<style>元素新增子節點;
    style.appendChild(document.createTextNode(css));
  }catch(ex){
    // 此時,訪問元素的StyleSheet屬性,該屬性有有一個cssText屬性,可以接受CSS程式碼;
    style.styleSheet.cssText = css;
  }
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(style);
}
// 呼叫;
loadStyleString("body {background-color:red}");