Если полный рабочий день, то цвет кнопки синий, а если неполный - красный цвет кнопки

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 сделать это.

Тогда есть CSS-препроцессоры, такие как Sass.Там вы можете использовать условные выражения, которые будут выглядеть следующим образом:

$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;
}

В этом случае вы, однако, окажете влияние на производительность, поскольку кэширование такой таблицы стилей будетсложно.