Можете ли вы использовать условия if / else в CSS? - PullRequest
Новая
       21

Можете ли вы использовать условия if / else в CSS?

100 голосов
/ 15 июля 2009

Я хотел бы использовать условия в моем CSS.

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

Я хочу, чтобы в соответствии с этой переменной менялась таблица стилей!

Похоже: 

[if {var} eq 2 ]
    background-position : 150px 8px;
[else]
    background-position : 4px 8px;

Можно ли это сделать? Как ты это делаешь?

Ответы [ 15 ]

3 голосов
/ 15 июля 2009

Насколько я знаю, в css нет if / then / else. Кроме того, вы можете использовать функцию javascript для изменения свойства background-position элемента.

2 голосов
/ 02 октября 2017

CSS - это хорошо продуманная парадигма, и многие ее функции используются не очень широко.

Если под условием и переменной вы подразумеваете механизм для распределения изменения некоторого значения по всему документу или в рамках некоторого элемента, то это как это сделать: 

var myVar = 4;
document.body.className = (myVar == 5 ? "active" : "normal");
body.active .menuItem {
  background-position : 150px 8px;
  background-color: black;
}
body.normal .menuItem {
  background-position : 4px 8px; 
  background-color: green;
}
<body>
<div class="menuItem"></div>
</body>

Таким образом, вы распределяете влияние переменной по стилям CSS. Это похоже на то, что предлагают @amichai и @SeReGa, но более универсально.

Другой такой трюк заключается в распространении идентификатора какого-либо активного элемента по всему документу, например снова при выделении меню: (используется синтаксис Freemarker) 

var chosenCategory = 15;
document.body.className = "category" + chosenCategory;
<#list categories as cat >
    body.category${cat.id} .menuItem { font-weight: bold; }
</#list>
<body>
<div class="menuItem"></div>
</body>

Конечно, это практично только с ограниченным набором предметов, таких как категории или состояния, а не с неограниченными наборами, такими как товары интернет-магазина, иначе сгенерированный CSS будет слишком большим Но это особенно удобно при создании статических автономных документов.

Еще один трюк для выполнения «условий» с CSS в сочетании с генерирующей платформой заключается в следующем: 

.myList {
   /* Default list formatting */
}
.myList.count0 {
   /* Hide the list when there is no item. */
   display: none;
}
.myList.count1 {
   /* Special treatment if there is just 1 item */
   color: gray;
}
<ul class="myList count${items.size()}">
<!-- Iterate list's items here -->
<li>Something...</div>
</ul>
1 голос
/ 19 сентября 2016

Вы можете использовать javascript для этой цели, таким образом:

  1. сначала вы устанавливаете CSS для «нормального» класса и для «активного» класса
  2. тогда вы даете своему элементу id 'MyElement'
  3. и теперь вы делаете ваше условие в JavaScript, что-то вроде примера ниже ... (вы можете запустить его, измените значение myVar на 5, и вы увидите, как оно работает) 

var myVar = 4;

if(myVar == 5){
  document.getElementById("MyElement").className = "active";
}
else{
  document.getElementById("MyElement").className = "normal";
}
.active{
  background-position : 150px 8px;
  background-color: black;
}
.normal{
  background-position : 4px 8px; 
  background-color: green;
}
div{
  width: 100px;
  height: 100px;
  }
<div id="MyElement">
  
  </div>
1 голос
/ 12 мая 2016

Если вы открыты для использования jquery, вы можете установить условные операторы, используя javascript в html: 

$('.class').css("color",((Variable > 0) ? "#009933":"#000"));

Это изменит цвет текста .class на зеленый, если значение переменной больше 0.

0 голосов
/ 09 апреля 2018

Вы можете использовать php, если пишете css в теге 

<style>
    section {
        position: fixed;
        top: <?php if ($test == $tset) { echo '10px' }; ?>;
    }
</style
Страница:
...