c# - 如何以编程方式切换样式表？

Question

我有一组具有不同颜色选项的样式表。我创建了一个用户控件，其中包含设置为链接按钮的样式表选项列表。单击时，我使用要使用的样式表的路径设置 session 变量，然后在母版页上检查此 session 并相应地设置样式表。

问题是在我再次刷新页面之前，样式表更改不会生效。如何强制样式表立即重新加载？

这是我的用户控件:

<ul id="swatch">
  <li>
    <div class="green"></div>
    <asp:LinkButton ID="lbGreen" runat="server" Text="Green" ClientIDMode="Static" 
          onclick="lbGreen_Click"></asp:LinkButton>
  </li>    
  <li>
    <div class="maroon"></div>
    <asp:LinkButton ID="lbMaroon" runat="server" Text="Maroon" ClientIDMode="Static" 
          onclick="lbMaroon_Click"></asp:LinkButton>
  </li>
  <li>
    <div class="silver"></div>
    <asp:LinkButton ID="lbSilver" runat="server" Text="Silver" ClientIDMode="Static" 
          onclick="lbSilver_Click"></asp:LinkButton>
  </li>
  <li>
    <div class="black"></div>
    <asp:LinkButton ID="lbBlack" runat="server" Text="Black" ClientIDMode="Static" 
          onclick="lbBlack_Click"></asp:LinkButton>
  </li>
</ul>

下面是这个控件背后的代码:

public partial class StylesheetPicker : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void lbGreen_Click(object sender, EventArgs e)
    {
        SetStylesheet("green");
    }

    protected void lbMaroon_Click(object sender, EventArgs e)
    {
        SetStylesheet("maroon");
    }

    protected void lbSilver_Click(object sender, EventArgs e)
    {
        SetStylesheet("silver");
    }

    protected void lbBlack_Click(object sender, EventArgs e)
    {
        SetStylesheet("black");
    }

    private void SetStylesheet(string selectedStyle)
    {
        switch (selectedStyle)
        {
            case "green":
                Session["style"] = "/css/green.css";
                break;
            case "maroon":
                Session["style"] = "/css/maroon.css";
                break;
            case "silver":
                Session["style"] = "/css/silver.css";
                break;
            case "black":
                Session["style"] = "/css/black.css";
                break;
            default:
                Session["style"] = "/css/green.css";
                break;
        }                      
    }
}

然后这是我母版页上的代码片段:

if(Session["style"] != null)
{
  var stylesheet = Session["style"];
  <link rel="stylesheet" type="text/css" href="@stylesheet" />
}
else
{
  <link rel="stylesheet" type="text/css" href="/css/green.css" />
}

看来我必须单击链接按钮两次 才能更改样式表。我该怎么做才能在单击按钮时立即更改？

谢谢

Answer 1

为您的样式表链接元素提供一个 id，然后您应该能够将其上的 href 更改为其他内容。此代码适用于 chrome，不确定其他浏览器:

<link id="userStylesheet" rel="stylesheet" type="text/css" href="/css/green.css" />

Javascript 来改变它:

var linkTag = document.getElementById('userStylesheet');
linkTag.href = "css/maroon.css";

对于服务器端问题，您可能会遇到问题，只需在他们回发对其更改后重定向，使其在下一个页面加载时生效。