Question

我有一个布尔数组，我在一个razor foreach循环中显示。在循环中，我在数组中显示不同的值。是否有可能根据显示的值更改css？

例如

if (@status == true) THEN color = green; if (@status == false) THEN color = red.

Answer 1

如果我正确理解了您的问题，您可以向HTML元素添加数据属性并将值（例如使用Javascript）更改为/来自＆＃34; true / false＆＃34;并在CSS中使用它：

{{1}}

Answer 2

＆＃13;

$('.test').each(function() {
  if(parseInt($(this).css('font-size')) > 16) {
    $(this).css('color', 'green');
  }
});

＆＃13;

.test {
  font-size: 18px;
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="test">Javascript manipulation: Green when largen than 16px</p>

＆＃13;

Answer 3

我遇到了同样问题的问题，但我已经实现了另一个解决方案，使用c＃/ razor / css而没有javascript。有人可能会更喜欢这个。

首先：将可能的值定义为枚举：

 public class enum MyRateTyp{
    Level1,
    Level2,
    Level3
  }

<强>第二找到一个地方，根据样式的编号，将进行转换。在我的例子中，我为 int 类型添加了一个扩展方法。

public MyRate Evaluate(this int i)
{
  MyRate answer = MyRate.Level1;
  if(i<50)
    {
      answer = MyRate.Level1;
    }
    .
    //All if statements here
    .
  if (i>100)
  {
    answer = MyRate.Level3;
  }
  return answer;
}

第三：在 .css 文件中，为每个可能的值定义样式，如下所示：

＆＃13;

.Level1{
     /*Style here for level 1*/
    }
.Level2{
   
      /* Style here for level 2*/
   }
    /*
      Other Styles here
    */

＆＃13;

最后在Razor页面上，将扩展方法分配给要根据值更改样式的元素的css类。例如。

The the level is <p class="@(myInt_variable.Evaluate())"> @(myInt_Variable) </p>

Answer 4

可以通过在包装盒上放置一个事件来更改颜色。这是在javascript＆＃34; AddEventListener＆＃34;

中完成的

如何根据值更改css样式

4 个答案: