如何在页面中有条件地呈现 CSS答案

【问题标题】：How to render CSS conditionally in page如何在页面中有条件地呈现 CSS
【发布时间】：2013-09-26 21:18:11
【问题描述】：

我想根据 cookie 有条件地在页面中呈现 css。在我的服务器端，我检测 cookie 并将 cookie 值存储在变量中，现在在 aspx 页面中，我想在 if else logic 的帮助下根据存储在代码后面的变量中的 cookie 值呈现 css。

假设在我后面的 .cs 代码中，我存储了像 strCountryCookie="GB" 这样的 cookie 值，并且在我的 aspx 页面中，我试图根据存储在变量中的 cookie 值使用 if else logic 呈现 css。

这就是我正在尝试的方式。

<% 
if(strCountryCookie=="DE") 
{ %>
#acloginpod {
    width:380px;
    background:#ebebeb url(../images/acloginpodbg.gif) repeat-x;
    border:1px solid #d3d3d3;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
}
<% } else { %>

它显示错误。所以我无法弄清楚如何使用 if else 逻辑根据 cookie 值呈现它。所以请用概念指导我。谢谢

【问题讨论】：

你不能在实际的 css 中做任何 if/else，但你可以在 style="" 中使用 if/else 使用内联 css
CSS 无法决定外部条件。决策应该从外部注入。

标签： asp.net css webforms

【解决方案1】：

正如其他人所说，您不能在 CSS 中使用服务器端代码。如果您确保可以从后面的代码中访问该字符串，那么您所做的几乎是正确的：

protected string strCountryCookie = "GB";

然后修正你的陈述

<head runat="server">
    <title>Test</title>
    <% if (strCountryCookie == "GB")
       { %>
       <style type="text/css">
        #acloginpod {
                width:380px;
                background:#ebebeb url(../images/acloginpodbg.gif) repeat-x;
                border:1px solid #d3d3d3;
                -webkit-border-radius:7px;
                -moz-border-radius:7px;
            }
       </style>
    <%} %>

虽然这很快就会变得相当丑陋...尤其是如果您添加了一堆国家/地区。

另一种选择是将所有自定义样式放入自己的样式表中，然后根据 cookie 动态加载样式表。在这种情况下，您将受益于样式表被缓存：

<link id="_countryStyleSheet" rel="stylesheet" type="text/css" runat="server" />

然后在你的代码后面加载样式表：

_countryStyleSheet.Href = String.Format("~/styles/{0}.css", strCountryCookie);

在本例中，样式表将命名为 GB.css 等。

【讨论】：

【解决方案2】：

您不能在 CSS 文件中使用任何代码。

您可以将您的 css 放入单独的文件中，然后根据您的情况将其包含或不包含在标题中。

在这种情况下，我更喜欢的方法是在每个页面上包含所有 css 标记，而是根据条件为我的元素分配不同的类。对您来说，这意味着使用类 .aloginpod 而不是 id，然后仅当国家/地区为“DE”时才为此类分配元素。

或者如果你想要不同国家的不同风格，那么定义元素类如下： ">

并在您的 css 中定义不同的类，例如 mydiv-DE 或 mydiv-GB

【讨论】：