几种切换CSS样式的方法
根据时段自动切换网站的CSS风格
我们可以让我们的博客或者网站根据当前的时间自动更换风格,比如我们制作两套css,一套上午用,一套下午用。这样我们可以设定12点以前使用上午的css,过了12点就自动换成下午的css。
实现起来也很简单,我用php的,所以只发php版本了。
< link rel="stylesheet" type="text/css" href="” />
实际上就是利用php的date函数和echo来控制输出css文件名,简单实用!
ASP版代码如下:
< link rel="stylesheet" type="text/css" href="<%
if hour(now)<12 then
response.write "a.css"
else
if hour(now)<17 then
response.write "b.css"
else
response.write "c.css"
end if
end if
%> ” />
Javascript方法:通过Html的select来控制样式表的变化
先在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)">
< /select>
种很难做到全站的CSS切换,只能局限在当前页面,并且不能记忆用户的选择。
服务端Cookie的方法
最好的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.phoyu.com/divcss/jizhongqiehuancssyangshidefangfa.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!
恩 不错 刚用到
这个我学习了!和恶化
现在对CSS还是不太懂呀…..
真的很专业。。。
呵呵,恩,我以前也是用这咱方做的!
全站都加上是否会加重空间负荷?
想找一个发表后可以自己编辑留言的插件 还是没找到
学习了谢谢分享
不错,学习!!
现在看到代码就有点头疼了
asp版的弄来试试··看效果如何·
好专业哦,我也要努力学习了…
切换方法之类的应该都是一样的