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

【问题标题】：How do i prevent CSS file from resetting on page reload?如何防止 CSS 文件在页面重新加载时重置？
【发布时间】：2019-02-20 06:17:16
【问题描述】：

我正在尝试更改我的 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 在 aspx 中

<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()"/>

【问题讨论】：

标签： javascript html css asp.net

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

例如，首先修改你的ChangeAccent函数来保存你的按钮状态如下：

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

然后你可以钩入你的Page_Load事件来检查这个状态是否为真；如果是，则调用ChangeAccent 函数：

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

【讨论】：