Menu
I have a boolean array that I am displaying in a razor foreach loop. Within the loop I am displaying the different values within the array. Is it possible,if so how, to change the css based on the value it is displaying?
For example
if (@status == true) THEN color = green; if (@status == false) THEN color = red.
735
CSS Conditional Rules are nothing but a feature of CSS in which the CSS style is applied based on a specific condition. So the condition here can be either true or false and based on the statements/style will get executed. These rules eventually come under CSS at-rule as they start with an @.
No, We can not use if-else conditions in CSS as CSS doesn't support logics. But we can use some alternatives to if-else which are discussed below: Method 1: In this method, we will use classes in HTML file to achieve this.
If I understand your question correctly, you could add a data-attribute to the HTML element and alter the value (for example with Javascript) to/from "true/false" and use that in your CSS like so:
<element data-status="true">Content</element>
<element data-status="false">Content</element>
[data-status="true"] {
color: green;
}
[data-status="false"] {
color: red;
}
$('.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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
