动态改变CSS样式

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

相关文章推荐

js动态改变css样式

矩阵的加减和转置  * 在数学上,矩阵是由方程组的系数及常数所构成的方阵。  * 在解线性方程组上既方便又直观。生活中通过矩阵多因素  * 探索解决问题。本实现了矩阵的基本运算,包括矩阵的构造、  *...

动态改变li标签样式

  • 2011年07月25日 17:20
  • 109KB
  • 下载

使用JavaScript动态添加CSS样式规则

动态添加规则到样式表是高效的手段,可能比你想象的还要简单。请记住这种方案,可能在你的下一个大应用中需要使用,因为它能在代码和元素处理这两方面避免你掉进坑里。...
  • renfufei
  • renfufei
  • 2014年09月05日 21:20
  • 20679

轻松学习JavaScript二十六:DOM编程学习之动态添加JS脚本和CSS样式

转载自:http://blog.csdn.net/erlian1992/article/details/50413710 先来一贯使用的HTML文档代码: [html] view ...

轻松学习JavaScript二十六:DOM编程学习之动态添加JS脚本和CSS样式

先来一贯使用的HTML文档代码: DOM window.onload=function(){ } div区域        一动态加载外部JS文件        要动态加载...

javascript 动态修改css样式方法

CSS ? 1 2 3 4 5 6 7 .style1{margin:10px auto ;ba...

angularJs中的ng-class动态改变样式

exam1.html .lock { background : #dcdcdc; } .red {

这是一个动态改变选中的li的样式(增加/删除),

这是一个动态改变选中的li的样式(增加/删除),其他同样适用 乌拉拉拷贝的别人的代码~菜鸟真的感觉太神奇了哈哈 ...

使用jquery.fullpage.js需要动态改变导航小圆点的样式

在使用jquery.fullpage.js(2.6.7)时遇到这样的需求, 看下图: 需求是4个小圆点的样式都不一样, 看了下插件自己生成的导航的HTML结构, 发现是这样的: 很显然, 小圆点的样...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动态改变CSS样式
举报原因:
原因补充:

(最多只允许输入30个字)