轻松学习JavaScript二十六:DOM编程学习之动态添加JS脚本和CSS样式

       先来一贯使用的HTML文档代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<script type="text/javascript">
window.οnlοad=function(){

}
</script>
</head>

<body>
<div id="box" class="box1 box2 box3">div区域</div>
</body>

       一动态加载外部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) 
    } 
};        
       添加前的效果:

       添加后的效果:




评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值