三种方法实现实时切换CSS样式
来源:互联网 发布:淘宝雅思作文批改 编辑:程序博客网 时间:2024/06/02 04:23
两套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");
}
在每个需要样式切换的页面都加上这个方法,则就可以实现全站切换,当然如果共用页面头,则实现更方便。
http://www.cnblogs.com/lgamoy/archive/2006/09/08/498526.aspx
- 三种方法实现实时切换CSS样式
- 三种方法实现实时切换CSS样式
- 三种方法实现实时切换CSS样式
- 如何实现CSS样式实时切换?
- 如何实现CSS样式实时切换
- 实时切换CSS样式
- (转)实时切换CSS样式
- 网页学习:实时切换CSS样式
- CSS实现导航条Tab切换的三种方法
- 添加css样式的三种方法
- 添加css样式的三种方法
- 添加css样式的三种方法
- CSS特殊样式(二)三种css方法实现三角效果
- css三种样式!
- CSS三种样式
- CSS三种样式
- CSS三种样式
- CSS三种样式
- 个人的web开发心得(四)----------非常适合入门新手,都是常识
- 数据安全验证之正则表达式
- DataList的模板演示,分列、分页、选择项
- 我的第一个Atlas例子
- 在asp.net中使用异步同步rss
- 三种方法实现实时切换CSS样式
- boost::call_traits
- xml在数据库中的应用
- MFC的生与死
- 怎样添加大的xml文件(By Dustin Metzgar)
- 网页设计中实用的制作技巧
- 企业库缓存应用程序块和ASP.net的缓存,过期检查功能比较
- 用table写过了个类似DATALIST的水平重复显示的东东,要用的来看看吧。
- 在模式窗体中提交而不打开新窗体