动态改变CSS样式

         最近由于一直在忙于两个项目的开发,所以也好久没有在上面发点什么,今天两个案子也快接近尾声了,趁着写设计文档的时间,将其中的一些部分整理出来跟大家一起学习共勉吧。
         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








上面是样式1的效果,鼠标
点击样式二后
,看到的效果如下:

效果2效果2

可以看到两个DataGrid控件的第一行背景不一样.

还有一种做法如下:

1.       首先也是准备两个写好的样式stone.cssstone1.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

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭