Question

我正在尝试更改我的asp项目中的主题色，单击时颜色会更改，但是在重新加载页面时将其重置为默认颜色，如何更改CSS根变量并阻止客户端CSS页面从重置为服务器副本？

或者，有什么更好的方法可以启用这样的主题？

CSS

:root {
    --custom_accent_purple: #cd40ff;
    --custom_accent_blue: #40acff;
    --custom_accent_orange: #ff8c40;
    --custom_accent_lime: #d3ff40;
    --custom_accent_green: #40ffb3;

    --ac: var(--custom_accent_green);
}

JavaScript 中的

<script type="text/javascript" >
    function ChangeAccent() {
    document.documentElement.style.setProperty('--ac', 'var(--custom_accent_blue)');
    }
</script>

ASP | HTML

<asp:Button ID="bt_th_1" class="th_c1" runat="server" Text="" OnClientClick="ChangeAccent()"/>

Answer 1

通常，应在重新加载页面时将按钮状态保存在某个位置，并根据其状态恢复其样式。根据持久性要求，您可以在服务器端或本地将按钮状态保存为cookie或使用browser storage。

Answer 2

您可以使用ASP.NET Session State来保持页面重新加载之间的按钮状态。

例如，首先修改您的ChangeAccent函数以保存按钮状态，如下所示：

function ChangeAccent() {
  document.documentElement.style.setProperty('--ac', 'var(--custom_accent_blue)');
  Session["buttonClicked"] = true;
}

然后，您可以进入Page_Load事件，以检查此状态是否为true；如果是这样，请调用ChangeAccent函数：

protected void Page_Load(object sender, EventArgs e)
{
    if (Session["buttonClicked"] != null) ChangeAccent();
}

如何防止CSS文件在页面重新加载时重置？

2 个答案: