动态加载js和css

2017-02-16 15:14:14

开发过程中经常需要动态加载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);

复制代码

 


  • 2019-07-11 11:35:20

    VirtualBox添加新硬盘

    昨晚在自己的virtualbox中的linux装matlab2010a,没想到硬盘空间不足,所以找了下怎么添加硬盘的资料。也很简单,每几条命令。 大致流程:我的virtualbox版本是3.2.8,linux版本是xubuntu10.01吧貌似

  • 2019-07-23 14:49:40

    Windows10上使用Linux子系统(WSL)

    Linux的Windows子系统让开发人员可以直接在Windows上运行Linux环境(包括大多数命令行工具,实用程序和应用程序),而无需建立在虚拟机的开销之上,整个系统共200多M,但包含了你能用到的所有功能,并且和windows完美互操作(省去linux挂载本地windows分区或目录的操作),目前Linux的windows子系统已经相当完善,可当作完整linux系统使用

  • 2019-07-24 01:21:15

    android开发无障碍app

    最近做一些为盲人提供服务的APP,还是挺有感触的,感谢手机和互联网的普及,他们的生活比以前丰富了很多。 通过读屏软件,盲人可以操作手机,上网浏览信息。读屏软件的工作原理很简单,就是读出屏幕上按钮、文本的信息。

  • 2019-07-26 19:31:03

    Guacamole搭建

    因项目需要,经历多天查阅各种文档,几经波折终于功德圆满,写下此篇文章供大家分享。Guacamole就个人理解而言是一个可以通过web浏览器访问远程服务器终端进行操作的可视化工具。主要由web(浏览器)、Guacamole Server(核心)、Remote Desktops(远程桌面)三大模块组成。

  • 2019-07-30 22:36:10

    使用 Spring Initializr 初始化 Spring Boot 项目

    万事开头难,你需要设置一个目录结构存放各种项目内容,创建构建文件,并在其中加入各 种依赖。Spring Boot CLI消除了不少设置工作,但如果你更倾向于传统Java项目结构,那你应该 看看Spring Initializr。