动态改变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样式

场景介绍: 生日日期input是一个时间控件(通过jquery的datepicker实现),当选择一个日期后,input应是被选中状态: 实现细节:css: ...
  • u011982967
  • u011982967
  • 2016年10月12日 16:25
  • 366

动态改变css样式

可以动态更改css样式动态更改css样式  function change(obj){     if(obj.className==||obj.className==redcolor)   obj.c...
  • shirui_java
  • shirui_java
  • 2009年01月13日 10:35
  • 274

如何用JavaScript动态修改CSS样式表

看过我写的《如何用JavaScript动态建立或增加CSS样式表》之后,你就很容易想明白如何修改CSS样式表了。   正好今天在论坛碰到一位朋友问这样的一个问题: .ls{width=120p...
  • theforever
  • theforever
  • 2011年12月15日 00:25
  • 14933

JavaScript--动态更改CSS样式

JavaScript太强大了,虽然是弱语言,不过一点都不输于Java 可以自行设置随机数,来动态更改CSS样式,每一次都是不一样的感觉,这个小功能挺实用的 JavaScript修改...
  • k183000860
  • k183000860
  • 2015年07月31日 22:56
  • 950

动态改变页面的CSS样式

在asp.net中,有的时候要动态变换CSS,比如有的时候做个性化页面,可以这样做之后,在要更换CSS的页面中,使用如下代码Sub Page_Load(Sender As Object, E As E...
  • goody9807
  • goody9807
  • 2004年12月21日 09:37
  • 1166

动态改变css样式单

  javascript控制的页面元素的功能很强大,如果再加上CSS样式单对元素的表现方式进行控制,将会产生丰富多彩的效果。 接下来以控制连接颜色的方式来演示: 当点击链接的时候,当...
  • xwkp2008
  • xwkp2008
  • 2006年10月12日 13:28
  • 1083

js动态改变css样式

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

实现能动态的改变css样式-场景

需求一: 比如某个表达元素在不同的状态需要展现不同的样子 确定前 确定后 错误提示 实现能动态的改变css属性值 angular方法 第一种:通过数据的双向绑定(不推荐) js: $sco...
  • sixteen_cicle
  • sixteen_cicle
  • 2017年05月02日 16:06
  • 596

关于使用JS动态修改CSS样式问题

【转】关于使用js动态修改样式问题  有时我们需要动态生成效果,那么就需要对页面的css进行各种处理,进而达到一些样式的改变。如动画,拖放等效果。所以使用JS正确...
  • yuanmei1986
  • yuanmei1986
  • 2016年03月01日 16:03
  • 2681

Weex学习第五篇:css样式和类的运用

复习上篇文章学习的数据绑定,感觉比较重要的是 1.计算属性的的使用,类似响应式编程,就是一个变量的值会随着它相关的那个变量的值的变化而变化,不需要去update,比如fullName = first...
  • sqc3375177
  • sqc3375177
  • 2017年01月12日 13:48
  • 1934
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:动态改变CSS样式
举报原因:
原因补充:

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