如果全职则按钮颜色为蓝色但如果兼职按钮颜色为红色答案

【问题标题】：If Full Time Then Button Color is Blue But If Part Time Button Color is Red如果全职则按钮颜色为蓝色但如果兼职按钮颜色为红色
【发布时间】：2019-09-19 21:10:41
【问题描述】：

在我的模板中，如果span 内容有“全职工作”，则按钮颜色为蓝色，否则按钮颜色为红色。

<div class="tag MB-3"><i class="nil-tag"></i>
  <%=Job-data. Rows[i]["date"] %>
</div>

<span class="full-time"><%=Job-data. Rows[i]["Time"] %></span>
</div>
<div class="tag MB-3"><i class="nil-tag"></i> </div>
<span class="full-time">full time</span>
</div>

【问题讨论】：

您的问题是什么？请在提出问题时尽可能提供详细信息，并展示您迄今为止为解决问题所做的工作。基于这些信息，StackOverflow 上的专家可以为您提供更好的帮助。查看guidelines，了解如何提问。

标签： javascript html css asp.net asp.net-core

【解决方案1】：

如果您可以访问 HTML，您可以为此使用类。考虑这个：
<p class="normal">Text</p>

<p class="active">Text</p> and in your CSS file:


p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}
这就是 CSS 的实现方式。

还有像 Sass 这样的 CSS 预处理器。你可以使用条件在那里，看起来像这样：
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
缺点是，您必须对样式表进行预处理，并且条件是在编译时评估的，而不是运行时。

CSS 本身的一个新特性是自定义属性（又名 CSS 变量）。它们在运行时进行评估（在支持他们）。

有了他们，你可以做一些事情：
:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}
最后，您可以使用自己喜欢的样式表进行预处理服务器端语言。如果您使用的是 PHP，请提供 style.css.php 文件，看起来像这样：
p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}
在这种情况下，您会受到性能影响，因为缓存这样的样式表会很困难。

【讨论】：