A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

动态加载 CSS 文件,经,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码:



  • var dynamicLoading = {



  •     css: function(path){



  •                 if(!path || path.length === 0){



  •                         throw new Error('argument "path" is required !');



  •                 }



  •                 var head = document.getElementsByTagName('head')[0];



  •         var link = document.createElement('link');



  •         link.href = path;



  •         link.rel = 'stylesheet';



  •         link.type = 'text/css';



  •         head.appendChild(link);



  •     },



  •     js: function(path){



  •                 if(!path || path.length === 0){



  •                         throw new Error('argument "path" is required !');



  •                 }



  •                 var head = document.getElementsByTagName('head')[0];



  •         var script = document.createElement('script');



  •         script.src = path;



  •         script.type = 'text/javascript';



  •         head.appendChild(script);



  •     }



  • }



对象包含两个完全独立的方法,分别用来加载 CSS 文件和 JS 文件,参数均为欲加载的文件路径。原理非常的简单:对于不同的加载文件类型创建不同的节点,然后添加各自的属性,最后扔到 head 标签里面。经测试,本方法兼容各浏览器,安全、无毒、环保,实乃 web 开发人员工作常备代码,请放心使用。
下面是调用代码,异常简单:



  • //动态加载 CSS 文件



  • dynamicLoading.css("test.css");







  • //动态加载 JS 文件



  • dynamicLoading.js("test.js")



1 个回复

倒序浏览

很不错,受教了
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马