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

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

Answer 1

您可以使用 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();
}