从 .css-ASP 中的文件后面的代码访问颜色字符串

Access color string from code behind in .css-File in ASP

我的登录屏幕有 3 个文件：Login.aspx、Login.aspx.cs、LoginStyle.css

在 Page_Load 方法中，我从当前系统接收一些数据，其中 theme-color 作为字符串（例如 #003b67 ).

在我的.css-文件中，我定义了 3 个样式规则，它们应该使用这种颜色。

.linkButtonPassword:hover {
        color: #38d39f;
}

.login-input-div.focus > .login-faItem > i {
    color: #38d39f;
}

.login-input-div:before, .login-input-div:after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background-color: #38d39f;
    transition: .4s;
}

所以我的问题是，有没有一种方法可以在不在我的 .aspx 文件中定义样式的情况下，将当前颜色字符串“#38d39f”替换为代码后面的颜色？ （有没有办法访问我的css-文件中的一种变量）

CSS 文件不会被 ASP.NET 处理（除非您重新配置整个 HTTP 管道，这通常是个坏主意），所以简短的回答是“否”。

...但是 CSS 自定义属性存在解决方案！

第 1 部分：

在您的 .aspx 页面中，最好是在 <head> 中（我希望您使用的是 <asp:ContentPlaceHolder？），将此 放在 [=44= 之后] 你当前的 <link rel="stlyesheet"> 元素：

<style type="text/css">
:root {
    --theme-color: <%= this.customColor %>;
}

.linkButtonPassword:hover,
.login-input-div.focus > .login-faItem > i,
.login-input-div:before,
.login-input-div:after {
    color: var(--theme-color);
}
</style>

你可能会争辩说这与直接用 <%= %> 覆盖属性是一回事 - 但这里的区别是你现在可以从上面删除 color: 属性 和直接在 .css 文件中使用 color: var(--theme-color);！

第 2 部分：

所以现在你的 <head> 应该包含这个：

<style type="text/css">
:root {
    --theme-color: <%= this.customColor %>;
}
</style>

您的 .css 文件应包含以下内容：

.linkButtonPassword:hover {
    color: #38d39f;
    color: var(--theme-color);
}

.login-input-div.focus > .login-faItem > i {
    color: #38d39f;
    color: var(--theme-color);
}

.login-input-div:before,
.login-input-div:after {
    content: '';
    position: absolute;
    bottom: -2px;
    width: 0%;
    height: 2px;
    background-color: #38d39f;
    background-color: var(--theme-color);
    transition: .4s;
}

color 值重复两次（第一次作为文字 hex-color，然后再次 var(--theme-color)）以确保向后兼容不支持 [=48] 的旧浏览器=] 自定义属性（即 IE11 - 我假设您在使用 ASP.NET WebForms 时必须支持它）。