动态加载js和css
文章转自王牌软件
站长推荐:NSetup一键部署软件
一键式完成美化安装包制作，自动增量升级，数据统计，数字签名。应对各种复杂场景，脚本模块化拆分，常规复杂的脚本代码，图形化设置。无需专业的研发经验，轻松完成项目部署。(www.nsetup.cn)
只回答业务咨询
站长推荐:NSetup一键部署软件
一键式完成美化安装包制作，自动增量升级，数据统计，数字签名。应对各种复杂场景，脚本模块化拆分，常规复杂的脚本代码，图形化设置。无需专业的研发经验，轻松完成项目部署。(www.nsetup.cn)
开发过程中经常需要动态加载js和css，今天特意总结了一下常用的方法。
1、动态加载js
方法一：动态加载js文件
|
1 2 3 4 5 6 7 8 9 |
// 动态加载js脚本文件 function loadScript(url) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); } // 测试 loadScript("javascript/lib/cookie.js"); |
方法二：动态加载js脚本
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// 动态加载js脚本 function loadScriptString(code) { var script = document.createElement("script"); script.type = "text/javascript"; try{ // firefox、safari、chrome和Opera script.appendChild(document.createTextNode(code)); }catch(ex) { // IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。 script.text = code; } document.body.appendChild(script); } // 测试 var text = "function test(){alert('test');}"; loadScriptString(text); test(); |
2、动态加载css
方法一：动态加载css文件
|
1 2 3 4 5 6 7 8 9 10 |
// 动态加载css文件 function loadStyles(url) { var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = url; document.getElementsByTagName("head")[0].appendChild(link); } // 测试 loadStyles("css/secondindex.css"); |
方法二：动态加载css脚本
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 动态加载css脚本 function loadStyleString(cssText) { var style = document.createElement("style"); style.type = "text/css"; try{ // firefox、safari、chrome和Opera style.appendChild(document.createTextNode(cssText)); }catch(ex) { // IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性 style.styleSheet.cssText = cssText; } document.getElementsByTagName("head")[0].appendChild(style); } // 测试 var css = "body{color:blue;}"; loadStyleString(css); |
学习日记，兼职软件设计，软件修改，毕业设计。
本文出自 学习日记，转载时请注明出处及相应链接。
本文永久链接: https://www.softwareace.cn/?p=1641
