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

最新推荐文章于 2022-05-20 22:43:51 发布

life is wonderful

最新推荐文章于 2022-05-20 22:43:51 发布

阅读量2.7k

点赞数 3

分类专栏： JavaScript DOM编程学习文章标签： JavaScript DOM编程 DOM编程学习 Web前端 DOM

本文链接：https://blog.csdn.net/erlian1992/article/details/50413710

版权

JavaScript 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

DOM编程学习

12 篇文章 6 订阅

订阅专栏

先来一贯使用的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) 
    } 
};

添加前的效果：