如果全时，则按钮颜色为蓝色，但如果部分时间按钮颜色为红色

Question

在我的模板中，我想如果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>

Answer 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本身的一个新功能是自定义属性（a.k.a. 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;
}

在这种情况下，您将对性能产生影响，因为缓存这样的样式表将很困难。