动态加载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-12-29 15:05:57

    php 数组分页 array_slice()函数用法

    今天用到一个函数，非常好用，分享给大家 array_slice() -从数组中取出一段 也就是说用这个函数可以和sql语句一样实现分页，原理是将查询出的数组，取出从指定下标开始到指定长度的数组

  • 2019-12-30 10:17:21

    router-link传递参数，query

    在vue-router中，有两大对象被挂载到了实例this； $route（只读、具备信息的对象）； $router（具备功能的函数） 查询字符串： 去哪里 ？ <router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>

  • 2019-12-30 16:48:41

    vue provide/inject详解和用法

    父子组件交互方式多种，props、vuex、 、 emit、localStorage还有就是这个provide/inject了。它适合层级比较深的组件，比如子，子孙，子孙后代的组件有好几个用到父组件的某个属性，就可以用到这个provide/inject,它可以避免写大量繁琐的传值代码 我这里为什么要使用它？ 我一个知识库详情父组件中包含了大量的子组件，每个子组件都需要父组件的知识库ID,这时候我不想写大量props，就用到provide/inject进行传值了