从 ASP 中的 .css-File 中的代码访问颜色字符串答案

【问题标题】：Access color string from code behind in .css-File in ASP从 ASP 中的 .css-File 中的代码访问颜色字符串
【发布时间】：2020-12-15 05:43:25
【问题描述】：

我的登录屏幕有 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;
}

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

【问题讨论】：

标签： css asp.net code-behind

【解决方案1】：

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

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

第 1 部分：

在您的.aspx 页面中，最好是在<head> 中（我希望您使用的是<asp:ContentPlaceHolder？），将此放在您当前的<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 值重复两次（首先作为文字十六进制颜色，然后再次使用 var(--theme-color)）以确保与不支持 CSS 自定义属性的旧浏览器（即 IE11 - 我假设你必须支持使用 ASP.NET WebForms 的外观）。

【讨论】：

谢谢！特别是<%= this.customColor %>; 帮助我访问了颜色。仍在我的 .aspx 文件中定义样式，但这对我有用:)