Web前端:前台、后台动态控制CSS

一、局部改变样式，分为改变直接样式，改变className和改变cssText三种。

需要注意点是，javascript对大小写是敏感，采用驼峰命名规范。className不能够把"N"写成"n"，cssText也不能够把"T"写成"t"，否则无法实现效果。

 

改变className，使用时不要跟style，例如：

document.getElementById('obj').style.className="…"的写法是错误的！

document.getElementById('obj').className="…"才是正确的写法！

 

改变cssText

但是如果用cssText的话，必须加上style，正确的写法是：

document.getElementById('obj').style.cssText="20px;border:solid 1px #f00;";

 

改变直接样式

document.getElementById('obj').style.backgroundColor="#003366″//使用$().style.color浏览器会报错，提示：style is not defined。

 

二、全局改变样式

通常情况下，我们可以通过改变link对象的href的值实现网页样式的实时切换，也就是"改变模板风格"。

如<link rel="stylesheet" type="text/css"id="cssLink"href="firefox.css" />

调用时很简单，如

<spanonclick="javascript:document.getElementById('cssLink').href='ie.css'">点我改变样式</span>

 

后台

想要在后台控制前台，必须设置对象的runat属性值为"server"。如

Html代码

 

1. <div id="DIV1" runat="server" >

2. </div>

 

后台:（C#代码）

 

1. this.DIV1.Style.Value = "display:none";

 

或者:

 

1. DIV1.Attributes.CssStyle.Value = "display:none";