本文详细介绍下,如何动态加载外部 js 文件及 js;动态加载外部 CSS 样式及 css 样式,感兴趣的朋友可以参考下哈,希望对你学习 js 有所帮助
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- // 动态加载外部js文件
- var flag = true;
- if( flag ){
- loadScript( "js/index.js" );
- };
- function loadScript( url ){
- var script = document.createElement( "script" );
- script.type = "type/javascipt";
- script.src = url;
- document.getElementsByTagName( "head" )[0].appendChild( script );
- };
- // 动态加载js
- if( flag ){
- var script = document.createElement( "script" );
- script.type = "text/javascript";
- script.text = " ";
- document.getElementsByTagName( "head" )[0].appendChild( script );
- };
- // 动态加载外部css样式
- if( flag ){
- loadCss( "css/base.css" );
- };
- function loadCss( url ){
- var link = document.createElement( "link" );
- link.type = "text/css";
- link.rel = "stylesheet";
- link.href = url;
- document.getElementsByTagName( "head" )[0].appendChild( link );
- };
- // 动态加载css样式
- if( flag ){
- var style = document.createElement( "style" );
- style.type = "text/css";
- document.getElementsByTagName( "head" )[0].appendChild( style );
- var sheet = document.styleSheets[0];
- insertRules( sheet,"#gaga1","background:#f00",0 );
- };
- function insertRules( sheet,selectorTxt,cssTxt,position ){
- if( sheet.insertRule ){ // 判断非IE浏览器
- sheet.insertRule( selectorTxt + "{" + cssTxt +"}" ,position );
- }else if( sheet.addRule ){ //判断是否是IE浏览器
- sheet.addRule( selectorTxt ,cssTxt ,position )
- }
- }
来源: