zoukankan      html  css  js  c++  java
  • 转 三种方法实现实时切换CSS样式

    两套CSS,分别封闭在两个不同的文件中:blue.cssgreen.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";

    }

    假如通过Htmlselect来控制样式表的变化,则可以这样用:

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

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

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

    </select>


    3
    .服务端Cookie的方法


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

    最好的CSS切换器应该使用服务器端脚本(PHPASPJSP等)来开发。这样做的好处是很明显的:直接、高效、兼容性好、可以记忆用户选择、甚至可以组合不同的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");

    }

    在每个需要样式切换的页面都加上这个方法,则就可以实现全站切换,当然如果共用页面头,则实现更方便。
  • 相关阅读:
    二维数组和最大字数组求取 2
    spring冲刺第七天
    spring冲刺第六天
    寻找水王
    spring冲刺第五天
    spring冲刺第四天
    spring冲刺第三天
    spring冲刺第二天
    大道至简读书笔记3
    spring冲刺第一天
  • 原文地址:https://www.cnblogs.com/flyfish/p/552350.html
Copyright © 2011-2022 走看看