CSS 中的 if/else 条件
CSS 对于设置网页内容的样式非常有用。我们可以以不同的方式访问 HTML 元素，并使用各种 CSS 属性来设置内容的样式。
有时，开发人员需要根据多种条件设置特定 HTML 元素的样式。例如，我们允许用户在 Web 应用程序中提交表单。如果表单提交成功，我们会以绿色显示成功消息。否则，我们会以红色显示错误消息。在这种情况下，我们需要更改消息元素的样式。
因此，我们可以使用 if-else 语句来实现，但遗憾的是，CSS 不支持 if/else 语句。因此，我们可以提供其他解决方案，我们将在下文中进行解释。
使用不同的类名
第一个解决方案是使用不同的类来设置组件的样式。我们可以在不同的类名中添加不同的样式，并根据特定条件使用 JavaScript 在元素中添加和删除类。
语法
用户可以使用以下语法来使用多个类，作为在 CSS 中使用 if/else 语句的替代方法。
element.classList.remove("success");
element.classList.add("error");
在上述语法中，"element"是一个 HTML 元素，我们需要更改其样式。之后，我们使用 classList 属性访问数组中所有元素的类。remove() 方法删除类，add() 方法添加类。
示例 1
在下面的示例中，我们创建了一个包含数字输入框的表单。此外，它还包含错误和成功按钮。我们在 CSS 中定义了"error"和"success"类，并添加了不同的样式。
在 JavaScript 中，当用户点击"error"按钮时，我们会显示错误消息，并将 error 类添加到输出元素。当用户点击"success"按钮时，我们会显示成功消息，并将 success 类添加到输出元素。
在输出中，用户可以填写表单并点击按钮，它会根据您按下的按钮显示输出文本的样式。
<html>
<head>
<style>
.error {border: 2px solid red; width: fit-content;}
.success {border: 2px solid green; width: fit-content;}
</style>
</head>
<body>
<h3> Using the <i> Multiple classes </i> as an alternative approach of if/else statement in CSS </h3>
<!-- creating the form -->
<form id = "test_form">
<label for = "test_input"> Enter the number: </label>
<input type = "number" id = "test_input" name = "test_input" placeholder = "Enter the number" required>
<br> <br>
<input type = "button" id = "error" value = "error">
<br> <br>
<input type = "button" id = "success" value = "success">
</form> <br>
<div id="output"> </div>
<script>
let output = document.getElementById("output");
let error = document.getElementById("error");
let success = document.getElementById("success");
error.addEventListener("click", function () {
output.innerHTML = "There is an error in the form submission.";
output.classList.remove("success");
output.classList.add("error");
});
success.addEventListener("click", function () {
output.innerHTML = "The form is submitted successfully.";
output.classList.remove("error");
output.classList.add("success");
});
</script>
</body>
</html>
示例 2
在下面的示例中，我们创建了多个包含不同值的单选按钮。在 JavaScript 中，我们为每个单选按钮添加了 click 事件。每当用户点击任何单选按钮时，它都会访问该单选按钮的值，并根据该值更改输出 div 元素的颜色。
<html>
<head>
<style>
#output {font-size: 20px; color: yellow; }
</style>
</head>
<body>
<h3> Using the <i> Multiple classes </i> as an alternative approach of if/else statement in CSS </h3>
<!-- Creating multiple radio inputs of color -->
<input type = "radio" name = "color" id = "red" value = "red"> <label for = "red"> Red </label>
<input type = "radio" name = "color" id = "green" value = "green"> <label for = "green"> Green </label>
<input type = "radio" name = "color" id = "blue" value = "blue"> <label for = "blue"> Blue </label>
<input type = "radio" name = "color" id = "yellow" value = "yellow" checked> <label for = "yellow"> Yellow </label>
<input type = "radio" name = "color" id = "orange" value = "orange"> <label for = "orange"> Orange </label>
<br> <br>
<div id = "output"> Yellow color is selected by default. </div>
<script>
let output = document.getElementById("output");
// adding a click event listener to all radio inputs
document.querySelectorAll("input[type=radio]").forEach(function (input) {
input.addEventListener("click", function () {
output.innerHTML = "You have selected " + this.value + " color.";
output.style.color = this.value;
});
});
</script>
</body>
</html>
使用 SASS 等预处理器
在 CSS 中使用 if/else 语句的另一种方法是使用 SASS 等预处理器。它允许我们编写 CSS 的条件语句，因为它构建在 CSS 之上。
语法
用户可以按照以下语法在 SASS 中使用 if/else 语句。
.element {
@if $bool == true {
color: $color;
} @else {
color: blue;
}
}
在上述语法中，我们根据布尔变量的值设置元素的颜色值。
示例 1
以下示例定义了包含值"red"的"color"变量。在"element"类中，我们使用 if/else 语句根据"color"变量的值将值赋给 CSS color 属性。
在输出中，我们可以看到，根据"color"变量的值，color 属性包含"red"。
$color: red;
.element {
@if $color == red {
color: $color;
} @else {
color: blue;
}
}
输出
.element {
color: red;
}
示例 2
在下面的示例中，我们定义了"width"变量。之后，我们根据 width 变量的值将值赋给"font-size"属性。
在输出中，我们可以根据 if/else 语句的条件检查 font-size 属性是否仅包含一个值。
$width: 200px;
.element {
@if $width > 300px {
font-size: 24px;
} @else if $width > 200px {
font-size: 18px;
} @else {
font-size: 14px;
}
}
输出
.element {
font-size: 14px;
}
用户学习了如何使用 CSS 中 if/else 条件的替代解决方案。在第一种方法中，我们根据特定条件使用 JavaScript 更改元素的类。在第二种方法中，我们使用 SASS 预处理器来使用 if/else 语句。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
