打开浏览器之后出现的第一页面基本上是导航页面,如hao123等。在众多电脑导航页面或者移动端APP页面,会有一个功能叫做“一键换肤”,而换肤功能简化之后就是使用JS和CSS来写作实现的。现在给出使用使用JavaScript更换DIV样式表代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手动为div设置样式</title>
</head>
<style>
#all{    margin: 0;height: 100%;width: 100%;position: absolute;top: 0px;bottom: 0px;overflow: hidden;word-break: break-all;padding: 0;}
#div1{width:300px;height: 30px;margin-bottom: 20px;}
.lf{float: left;line-height: 30px;font-size: 20px;font-weight: bold;}
.rt{float: right;background: red;padding:0 5px;line-height: 30px;font-size: 12px;color: #FFF;font-weight: bold;    border: 1px solid #F2F2F2;}
#div3{width: 320px;height: 220px;position: fixed;top: 0px;left: 0px;right: 0px;bottom: 120px;margin: auto;    border: 15px solid rgba(51, 51, 51, 0.29);display: none;background: white;}
#div2{width: 200px;height: 200px;background: #F1F1F1;margin: 30px;border: 5px solid rgba(51, 51, 51, 0.89);}
.nr{width: 320px;    height: 150px;}
.anniu{    margin: 0 auto;height: 30px;width: 300px;float: left;text-align: center;margin-top: 10px;}
#hongse{padding: 0 5px;    width: 40px;height: 30px;line-height: 30px;color: white;float: left;margin: 0 5px;text-align: center;background: red;}
#huangse{padding: 0 5px;    width: 40px;height: 30px;line-height: 30px;color: white;float: left;margin: 0 5px;text-align: center;background:#83c108;}
#lanse{padding: 0 5px;    width: 40px;height: 30px;line-height: 30px;color: white;float: left;margin: 0 5px;text-align: center; background:blue;}
.chicun{background:rgba(14, 14, 14, 0.11);padding: 0 5px;width: 30px;height: 30px;line-height: 30px;color: rgb(84, 71, 71);float: left;margin: 0 5px;text-align: center;}
</style>
 
<script>
window.onload=function(){
var aniu=document.getElementById('shezhi');
var tc=document.getElementById('div3');
var bd=document.getElementById('all');
var chg=document.getElementById('div2')
var hong=document.getElementById('hongse');
var huang=document.getElementById('huangse');
var lan=document.getElementById('lanse');
var k2=document.getElementById('kuan200');
var k3=document.getElementById('kuan300');
var k4=document.getElementById('kuan400');
var g2=document.getElementById('gao200');
var g3=document.getElementById('gao300');
var g4=document.getElementById('gao400');
var hf=document.getElementById('huifu');
var qd=document.getElementById('queding');
 
hf.onclick=function(){
chg.style.background='#F1F1F1';
chg.style.height='200px';
chg.style.width='200px';
}
 
qd.onclick=function(){
tc.style.display='none';
}
aniu.onclick=function(){
tc.style.display='block';
bd.style.background='rgba(51, 51, 51, 0.08)';
};
 
hong.onclick=function(){
chg.style.background='red';
}
 
huang.onclick=function(){
chg.style.background='yellow';
}
 
lan.onclick=function(){
chg.style.background='blue';
}
 
k2.onclick=function(){
chg.style.width='200px';
}
 
k3.onclick=function(){
chg.style.width='300px';
}
 
k4.onclick=function(){
chg.style.width='400px';
}
g2.onclick=function(){
chg.style.height='200px';
}
 
g3.onclick=function(){
chg.style.height='300px';
}
 
g4.onclick=function(){
chg.style.height='400px';
}
};
</script>
<body>
<div id="all">
<div id="div1">
<div class="lf">请问下面的DIV设置样式:</div>
<input id="shezhi" type="button" value="点击设置" class="rt" />
</div>
<div id="div2"></div>
<div id="div3">
<div class="nr">
<ul style="    margin-left: -20px;">
<li style="float: left;    list-style: none;margin: 10px 0;">
<span style="float: left;    line-height: 30px;text-decoration: none;list-style: none;">请选择背景色:</span>
<input id="hongse" type="button" value="红"/>
<input id="huangse" type="button" value="黄"/>
<input id="lanse" type="button" value="蓝""/>
</li>
<li style="float: left;    list-style: none;margin: 10px 0;">
<span style="float: left;    line-height: 30px;text-decoration: none;list-style: none;">请选择宽度值:</span>
<span id="kuan200" class="chicun">200</span>
<span id="kuan300" class="chicun">300</span>
<span id="kuan400" class="chicun">400</span>
</li>
<li style="float: left;    list-style: none;margin: 10px 0;">
<span style="float: left;    line-height: 30px;text-decoration: none;list-style: none;">请选择高度值:</span>
<span id="gao200" class="chicun"">200</span>
<span id="gao300" class="chicun">300</span>
<span id="gao400" class="chicun";">400</span>
</li>
 
</ul>
</div>
<div class="anniu">
<input id="huifu" type="button" value="恢复" style="background: #108479;border: 1px solid #F2F2F2;font-size: 15px;color: #f9f9f9;padding: 5px 8px;margin: 0 auto;"/>
<input id="queding" type="button" value="确定" style="background: #108479;border: 1px solid #F2F2F2;font-size: 15px;color: #f9f9f9;padding: 5px 8px;margin: 0 auto;"/>
 
</div>
</div>
 
</div>
</body>
</html>
 

其原理就是就是利用JS获取元素后通过事件来更改相关值。仅供大家参考使用。本代码写的都比较详细,写法并没有太多简化,目的是让大家看的更清楚明了。显示效果如下:

原版css样式
上图为div原版css样式,粗略的设置了长宽及背景色。上方有一个“点击设置”,类似导航页面的“一键换肤”。点开之后出现设置窗口如下图所示:
设置窗口
这个设置窗口可以写任意css样式或者其他命令。通过点击各项样式和命令,可以对上方的div的样式进行更换。最终效果如下:
更换CSS 样式后的效果