javascript - 如何动态更改 ASP.NET MVC Core2 中的 CSS 变量？

Question

我希望用户能够指定他最喜欢的颜色。然后整个页面应该更改为这个特定的配色方案。

我的 CSS 以此为基础完成的:

:root {
    --maincolor: black;
}

在我的 CSS 中通过按下按钮或类似的方式动态更改此变量的最佳方法是什么？

PS:我宁愿只设置一次这个值然后就完成了

编辑:我的解决方案:

<script>
    var color = "@Html.ViewData["Color"]";
    document.body.style.setProperty('--maincolor', color);
</script>

足以按我的意愿更改--maincolor。要设置颜色，请将其放入 Controller 中:

ViewData["Color"] = "red"

Answer 1

在我看来，最好的选择是将用户关联到 CSS 类，而不是颜色。然后，更改每个用户的类别变得微不足道。

例如，您可以从数据库或其他持久性方法中存储和检索此 CSS 类。然后，在检索时，您可以像这样通过 Razor 将类简单地添加到您的元素中:

<div class="@UserColorClassName">
    <p>
        Any text you like here for User: @UserName
    </p>
</div>

此方法还有其他变体。例如，您可以创建一个“UserCSSClasses”数据库表，其中包含不同用户的类名和属性。

或者，您可以简单地存储 CSS 十六进制颜色并将其与用户相关联。

此实现的示例如下:

<div style="color: @(!string.IsNullOrEmpty(UserHexColor) ? UserHexColor : "")">
    <p>
        Any text you like here for User: @UserName
    </p>
</div>

编辑:听起来您要针对每个用户进行很多更改，而不仅仅是一种颜色。为此，我推荐以下解决方案:

1. 将用户/类关联存储在数据库或其他持久性方法中，如上所述。
2. 不要将类应用于 View 内的元素，而是将其应用于 body 元素或包含元素的元素。

这样，您可以使用 CSS 覆盖更改任意数量的类:

body.User001 h1 {
    color: red;
}

body.User001 p {
    color: #c1c1c1;
}

body.User001 p span.caption {
    color: red;
}

body.User002 h1 {
    color: blue;
}

/* etc... */