js动态修改整个页面样式达到换肤效果

jsPro1\js动态修改整个html页面样式(换肤).html

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<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() { 
//更换css文件 
var lis = gel("uList").childNodes; 
for (var i = 0; i < lis.length; i++) { 
if (lis[i].nodeType == 1) { 
lis[i].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" style="text-decoration: none;margin-top: 100px;"> 
<li style="display: block;width: 30px;height: 20px;background-color: red;" class="red"></li> 
<li style="display: block;width: 30px;height: 20px;background-color: blue" class="blue"></li> 
</ul> 
</body> 
</html> 

jsPro1\css\red.css

复制代码代码如下:

 
* { 
margin: 0px;padding: 0px; 
} 


body { 
background-color: #eeeeee; 
} 
span { 
color: red; 
} 
#txt { 
color: #f00;border: 1px solid #7d1515; 
} 
.btn { 
background-color: #a52a2a;border: none;color: white;width: 100px;height: 28px; 
} 

jsPro1\css\blue.css

复制代码代码如下:

 
* { 
margin: 0px;padding: 0px; 
} 


body { 
background-color: #eeeeee; 
} 
span { 
color: blue; 
} 
#txt { 
color: #0000cd;border: 1px solid #006400; 
} 
.btn { 
background-color: #0000cd;border: none;color: white;width: 100px;height: 28px; 
} 

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类