您的位置：首页 > Web前端 > CSS

三种方法实现实时切换CSS样式

2006-09-08 11:25 597 查看

两套CSS，分别封闭在两个不同的文件中：blue.css和green.css。

1．浏览器的页面风格设置

在

<head>

和

</head>

之间加入如下两行XHTML代码：

<link rel="stylesheet" type="text/css" title="

主题A" href="a.css" />

<link rel="alternate stylesheet" type="text/css" title="

主题B" href="b.css" />

然后使用firefox打开这个页面，在菜单栏中选择：查看 -> 页面风格，就可以使用你的主题了。

2．Javascript方法

先在head中添加

<link type="text/css" id="pagestyle" rel="stylesheet" href="style/blue.css" />

再添加js函数，来改变样式表的地址，其中v为样式表的名称。

function chgStyle(v){

document.getElementsByTagName("link")["pagestyle"].href = "style/" + v + ".css";

}

假如通过Html的select来控制样式表的变化，则可以这样用：

<select onchange="chgStyle(this.value)">

<option value="blue" selected>蓝色风格</option>

<option value="green">绿色风格</option>

</select>

3．服务端Cookie的方法

前两种方法的弊端显而易见，第一种只能适用firefox浏览器，IE不支持，第二种很难做到全站的CSS切换，只能局限在当前页面，并且不能记忆用户的选择。

最好的CSS切换器应该使用服务器端脚本（PHP、ASP、JSP等）来开发。这样做的好处是很明显的：直接、高效、兼容性好、可以记忆用户选择、甚至可以组合不同的CSS实现相当复杂的“皮肤”切换。

先在head中添加

<link type="text/css" id="pagestyle" rel="stylesheet" runat="server" />

要在服务端使用该样式表，需要在服务端声明：

protected System.Web.UI.HtmlControls.HtmlGenericControl pagestyle;

然后通过一个DropDownList来实现多个样式的切换。

private void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e)

{

string style = this.DropDownList1.SelectedValue;

Response.Cookies["pagestyle"].Value = style; //Cookie保存该样式

Response.Cookies["pagestyle"].Expires = DateTime.Now.AddDays(3);

//设置cookie有效期，如果不设置则只在会话中创建，不保存该cookie。

this.pagestyle.Attributes.Add("href","style/" + style + ".css");//设置样式

}

并在页面的Page_Load中添加判断用户是否已设置了样式，如未设置，则使用默认。

if(!IsPostBack)

{

string style = string.Empty;

if(Request.Cookies["pagestyle"] != null)

{

style = Request.Cookies["pagestyle"].Value;

}

style = (style == string.Empty) ? "blue" : style;

this.DropDownList1.SelectedValue = style;

this.pagestyle.Attributes.Add("href","style/" + style + ".css");

}

在每个需要样式切换的页面都加上这个方法，则就可以实现全站切换，当然如果共用页面头，则实现更方便。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航