提问者:小点点

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


我的登录屏幕有3个文件:login.aspxlogin.aspx.cslogin.aspx.cs

page_load方法上,我从当前系统接收到一些数据,其中包括主题颜色字符串(例如#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文件中的一种变量)


共1个答案

匿名用户

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

。。。然而,CSS自定义属性存在解决方案!

.aspx页中,理想情况下是在中(希望您使用的是),将以下内容放在当前元素之后:

<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);

因此,您的应该包含以下内容:

<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-我认为您必须支持IE11-似乎您正在使用ASP.NET WebForms)的向下兼容。