Question

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

我的CSS以此为基础完成：

isCornerPos (i,j) = inCorner i && inCorner j
   where inCorner x = x == 1 || x == boardSize

在按钮按下或类似的东西中动态更改CSS内部变量的最佳方法是什么？

PS：我更喜欢只设置一次这个值然后用它来完成

编辑：我的解决方案：

:root {
    --maincolor: black;
}

足以改变 - 我想要的颜色。要设置颜色，请将其置于控制器内：

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

Answer 1

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

例如，您可以从数据库或其他持久性方法中存储和检索此CSS类。然后，在检索时，您可以通过Razor将类添加到元素中，如下所示：

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

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

或者，您可以简单地存储CSS hex-color并将其与用户关联。

此实施的一个例子如下：

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

编辑：听起来您需要对每个用户进行大量更改，而不仅仅是一种颜色。为此，我建议采用以下解决方案：

将用户/类关联存储在数据库或其他持久性方法中，如上所述。
不是在视图中的元素上应用类，而是将其应用于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... */

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

1 个答案: