css做到动态样式变化其实很简单的，简单归纳就是下面几个步骤：
1. 首先准备多个不同的样式。如stone.css,stone1.css
2. 前台页面写下如下脚本:
<head runat="server">
<title>广告管理页</title>
<link href="stone.css" type="text/css" rel="stylesheet" id="mycss">//默认样式
<script language="javascript">
var n;
function setCSSByN(n)
{
mycss.styleSheet.cssText="";
if(n==1)
mycss.styleSheet.addImport("stone.css");
else if(n==2)
mycss.styleSheet.addImport("stone1.css");
}
</script>
</head>
3.前台页面调用:
<div id="menu">
<ul>
<li><a href="javascript:setCSSByN(1);">样式1</a></li>
<li><a href="javascript:setCSSByN(2);">样式2</a></li>
<li style="border:0;">挑选我的颜色</li>
</ul>
</div>
效果如下:
效果1
上面是样式1的效果,鼠标
点击样式二后,看到的效果如下:
效果2
可以看到两个DataGrid控件的第一行背景不一样.
还有一种做法如下：
1. 首先也是准备两个写好的样式stone.css和stone1.css
2. 前台代码如下：
<title>广告管理页</title>
<link href="stone.css" type="text/css" rel="stylesheet" media="screen" />
<script>
var cssPath = "stone";
var styleID=1;
document.write('<link rel="stylesheet" type="text//css" id="cssLink" href="'+cssPath+styleID+'.css" //>');
var cssLink=document.getElementById("cssLink");
function styleChange(n) {
// if(n==5){
// document.getElementById("select").style.background="#7b0003";//设置背景色
// }
// else{
// document.getElementById("select").style.background="#e8e8e8";//设置背景色
// }
cssLink.href = cssPath+n+".css";
}
</script>
</head>
<div id="select" class="select">
<a href="javascript:styleChange(1);" class="l1">样式1</a>
<a href="javascript:styleChange(2);" class="l2">样式2</a>
<p>请挑选我的颜色：</p>
3. 效果同上：
最近想换工作了，有兴趣的可以联系我下哦，希望共同学习大家一起进步：
邮箱：l_sj0419@163.com
QQ:180315586
922
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
