轻松学习JavaScript二十六:DOM编程学习之动态添加

页面导航:首页 > 网络编程 > JavaScript > 轻松学习JavaScript二十六:DOM编程学习之动态添加

轻松学习JavaScript二十六:DOM编程学习之动态添加

来源: 作者: 时间:2016-01-14 16:31 【

先来一贯使用的HTML文档代码:DOMwindow onload=function(){}div区域 一动态加载外部JS文件 要动态加载外部index js文件的代码:alert( "I am JS file! ");
先来一贯使用的HTML文档代码:



<script type="text/javascript">
window.onload=function(){

}
</script>
div区域

一动态加载外部JS文件

要动态加载外部index.js文件的代码:

alert("I am JS file!");

动态加载外部JS文件的代码:

//动态加载外部JS文件
var flag=true; //设置true再加载
if(flag){
     loadScript("index.js");//加载的外部JS文件
}; 
function loadScript(url){ 
     var script=document.createElement("script"); 
     script.type="text/javascript"; 
     script.src=url; 
     document.getElementsByTagName("head")[0].appendChild(script); 
}; 

加载前的效果:

\

加载后的效果:

\

二动态加载JS代码

//动态加载JS代码
var flag=true; //设置true再加载
if(flag){ 
    var script=document.createElement("script"); 
    script.type="text/javascript"; 
    script.text ="alert('I am JS code!')"; 
    document.getElementsByTagName("head")[0].appendChild(script); 
}; 

加载前的效果:

\

加载后的效果:
\ 三动态加载外部CSS样式文件
var flag=true; //设置true再加载
if(flag){ 
   loadCss("style.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样式
//动态加载CSS样式
var flag=true; //设置true再加载
if(flag){ 
    var style=document.createElement("style"); 
    style.type="text/css"; 
    document.getElementsByTagName("head")[0].appendChild(style); 
    var sheet = document.styleSheets[0]; 
    insertRule(sheet,".box1","color:red",0); 
}; 
//上一篇博文我们提到的插入到CSS样式规则列表的第一个位置
function insertRule(sheet,selectorText,cssText,position){ 
    // 判断非IE
    if(sheet.insertRule){  
         sheet.insertRule(selectorText+"{"+cssText+"}",position); 
    }
	//判断是否是IE浏览器
	else if(sheet.addRule){  
         sheet.addRule(selectorText,cssText,position) 
    } 
};        
添加前的效果:
\

添加后的效果:

\

 

\

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<