如何根据值更改css样式

Question

我有一个布尔数组，我在剃须刀的foreach循环中显示。在循环内，我在数组内显示不同的值。如果可以的话，是否有可能根据它显示的值更改CSS？

例如

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

Answer 1

如果我正确理解你的问题，你可以添加一个数据属性到HTML元素和改变值（例如用Javascript）到/从“真/假”和使用在你的CSS像这样：

<element data-status="true">Content</element> 
<element data-status="false">Content</element> 

[data-status="true"] { 
    color: green; 
} 
[data-status="false"] { 
    color: red; 
} 

Answer 2

有可能通过把一个事件上的框来改变颜色。这是在JavaScript中完成的“AddEventListener”

Answer 3

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

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

<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>

Answer 4

我遇到有同样的问题，这个问题就，但是，我已经实现了另一种解决方案，使用C＃/剃刀/ 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文件，定义样式对于每个可能的值，就像这样：

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

最后剃刀上页，将扩展方法分配给要根据va更改样式的元素的css类略。例如， 。

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