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中，当用户点击错误按钮时，我们会显示错误信息并将错误类添加到输出元素上。当用户点击成功按钮时，我们会显示成功信息并将成功类添加到输出元素上。

在输出中，用户可以填写表单并点击按钮，根据你按下的按钮来显示输出文本的样式。

<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中，我们为每个单选按钮添加了点击事件。每当用户点击任何单选按钮时，它将访问单选按钮的值，并根据该值更改输出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;
   }
}

在上述语法中，我们根据bool变量的值设置元素的颜色值。

示例1

下面的示例定义了包含“red”值的“color”变量。在“element”类中，我们使用if/else语句根据“color”变量的值为CSS颜色属性赋值。

在输出中，我们可以观察到颜色属性根据“color”变量的值包含“red”。

$color: red;
.element {
   @if $color == red {
      color: $color;
   } @else {
      color: blue;
   }
}

输出

.element {
  color: red;
}

示例2

在下面的示例中，我们定义了”width”变量。之后，根据”width”变量的值为”font-size”属性赋值。

在输出中，我们可以检查”font-size”属性只包含一个值，该值基于if/else语句的条件。

$width: 200px;
.element {
   @if $width > 300px {
      font-size: 24px;
   } @else if $width > 200px {
      font-size: 18px;
   } @else {
      font-size: 14px;
   }
}