首頁 > 開發者 > JavaScript

JavaScript 動態載入指令碼和樣式的方法_javascript技巧

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一 動態指令碼

當網站需求變大,指令碼的需求也逐步變大;我們不得不引入太多的JS指令碼而降低了整站的效能;
所以就出現了動態指令碼的概念,在適時的時候載入相應的指令碼;

1.動態引入js檔案

  var flag = true;  if(flag){      loadScript('browserdetect.js');          // 調用函數,引入路徑;  }  function loadScript(url){    var script = document.createElement('script');   // 建立script標籤;    script.type = 'text/javascript';          // 設定type屬性;    script.src = url;                 // 引入url;    document.getElementsByTagName('head')[0].appendChild(script);  // 將script引入<head>中;  }

2.動態執行js代碼

  var script = document.createElement('script');  script.type = 'text/javascript';  var text = document.createTextNode("alert('Lee')");  // 設定script標籤內容;IE會報錯;  script.appendChild(text);  document.getElementsByTagName('head')[0].appendChild(script);  // PS:IE瀏覽器認為script是特殊元素,不能再訪問子節點;  // 為了相容,可以使用text屬性來代替;  function loadScriptString(code){    var script = document.createElement("script");    script.type = "text/javascript";    try{    // IE瀏覽器認為script是特殊元素,不能再訪問子節點;報錯;      script.appendChild(document.createTextNode(code));　　// W3C方式;    }catch(ex){      script.text = code;　　　　　　　　　　　　　　　　　　　　// IE方式;    }    document.body.appendChild(script);  }  // 調用;  loadScriptString("function sayHi(){alert('hi')}");

二 動態樣式

為了動態載入樣式表,比如切換網站皮膚;
樣式有兩種方式進行載入,一種是<link>標籤,一種是<style>標籤;

1.動態引入link檔案

  var flag = true;  if(flag){    loadStyles('basic.css');　　　　　　　　　　　　　　　　　　// 調用函數,引入路徑;  }  function loadStyles(url){    var link = document.createElement('link');    link.rel = 'stylesheet';    link.type = 'text/css';    link.href = url;    document.getElementsByTagName('head')[0].appendChild(link);  }

2.動態執行style代碼

  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);    }  }
// 動態執行style2  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}");

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More