开发过程中经常需要动态加载js和css，今天特意总结了一下常用的方法。
1、动态加载js
方法一：动态加载js文件
1 // 动态加载js脚本文件2 function loadScript(url) {3 var script = document.createElement("script");4 script.type = "text/javascript";5 script.src = url;6 document.body.appendChild(script);7 }8 // 测试9 loadScript("javascript/lib/cookie.js");
方法二：动态加载js脚本
1 // 动态加载js脚本 2 function loadScriptString(code) { 3 var script = document.createElement("script"); 4 script.type = "text/javascript"; 5 try{ 6 // firefox、safari、chrome和Opera 7 script.appendChild(document.createTextNode(code)); 8 }catch(ex) { 9 // IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。10 script.text = code;11 }12 document.body.appendChild(script);13 }14 // 测试15 var text = "function test(){alert('test');}";16 loadScriptString(text);17 test();
2、动态加载css
方法一：动态加载css文件
1 // 动态加载css文件 2 function loadStyles(url) { 3 var link = document.createElement("link"); 4 link.type = "text/css"; 5 link.rel = "stylesheet"; 6 link.href = url; 7 document.getElementsByTagName("head")[0].appendChild(link); 8 } 9 // 测试10 loadStyles("css/secondindex.css");
方法二：动态加载css脚本
1 // 动态加载css脚本 2 function loadStyleString(cssText) { 3 var style = document.createElement("style"); 4 style.type = "text/css"; 5 try{ 6 // firefox、safari、chrome和Opera 7 style.appendChild(document.createTextNode(cssText)); 8 }catch(ex) { 9 // IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性10 style.styleSheet.cssText = cssText;11 }12 document.getElementsByTagName("head")[0].appendChild(style);13 }14 // 测试15 var css = "body{color:blue;}";16 loadStyleString(css);