JavaScript动态更改引入样式表
JavaScript动态更改引入样式表属于前端实例代码，有关更多实例代码大家可以查看。
本章节如何动态设置页面的css样式属性，比如页面的换肤效果也是通过此方式实现的。
当然比较完善的换肤效果要稍稍复杂一些，这只是介绍一下如何更改外部css样式表。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<link href="css/blue.css" rel="stylesheet" id="mylink"/>
<script type="text/javascript">
function gel(id){
return document.getElementById(id);
}
window.onload=function(){
var lis=gel("uList").childNodes;
for (var i = 0; i < lis.length; i++){
if(lis[i].nodeType==1){
lis.onclick = function () {
gel("mylink").href = "css/" + this.className + ".css";
};
}
}
};
</script>
</head>
<body>
<div> <span>前端教程网欢迎您</span><br/>
<input type="text" id="txt"/>
<input type="button" value="提交" class="btn"/>
</div>
<ul id="uList">
<li style="width:30px;height:20px;background-color:red;" class="red"></li>
<li style="width:30px;height:20px;background-color:blue" class="blue"></li>
</ul>
</body>
</html>
以上代码点击li元素可以切换不同的样式表效果，下面介绍一下它的实现过程。
一.代码注释:
（1）.function gel(id){return document.getElementById(id);}，封装了一下document.getElementById()函数，使用更方便。
（2）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（3）.var lis=gel("uList").childNodes，获取ul元素下的所有子节点，包括文本节点和元素节点，空白和换行属于文本节点。
（4）.for (var i = 0; i < lis.length; i++)，遍历每一个节点。
（5）.if(lis.nodeType==1)，判断节点是否是元素节点。
（6）.lis.onclick = function () {gel("mylink").href = "css/" + this.className + ".css";}，注册click事件处理函数，也就是点击li元素就会重新设置link标签的href属性值。
二.相关阅读:
（1）.nodeType属性参阅js nodeType属性一章节。
（2）.childNodes属性参阅js childNodes一章节。
（3）.className参阅js className一章节。
JavaScript动态更改引入样式表，这样的场景在实际项目中还是用的比较多的，关于JavaScript动态更改引入样式表就介绍到这了。