javascript - 为什么我必须在 CSS 中预先设置输入字段的样式，然后才能通过 Javascript 实现该样式？

Question

我目前正在学习表单验证教程，其中我正在创建一个注册表单。我希望如果用户输入的信息满足输入字段条件，则输入字段的边框和图标变为绿色，如果不满足，则输入字段的边框和图标变为红色，如下图所示。

这是“用户名”输入字段的代码。

.form-control.success input {
  border-color: #2ecc71;
}

.form-control .success i.fa-check-circle {
  visibility: visible;
  color: #2ecc71;
}

  <div class="form-control success" >
          <label for="username">Username</label>
          <input type="text" name="username"
          placeholder="Enter username..." id="username">
          <!-- Awesome fonts -->
          <i class="fas fa-check-circle"></i>
          <i class="fas fa-exclamation-circle"></i>

我的导师在处理 Javascript 文件之前就已经在 CSS 中预先设置了输入字段的样式。我的问题是，为什么必须在 CSS 中预先设置样式，难道不能让输入字段保持正常状态，如果满足条件，则使用 Javascript 将输入字段变为绿色。

Answer 1

有多种方法可以设置表单输入条件的样式。最基本的是更改您想要更改的标签上的每个样式。我告诉你我到底是什么意思。

function correctInput(elem) {
  elem.querySelector("input").style.borderColor = "#2ecc71";
  elem.querySelector("i.fa-check-circle").style.visibility= "visible";
  elem.querySelector("i.fa-check-circle").style.color = "#2ecc71";
}

通过这种方式，您只需使用 javascript 即可更改样式。但你的教练使用的技术要聪明得多。在此技术中，您将 javascript 和 CSS 一起使用。

function correctInput(elem) {
  elem.setAttribute("class", "success");
}

现在你看到区别了。在 CSS 中，您将使用您希望在输入中包含的每个条件来设置 div block 和子 block 的样式。然后，您只需使用 javascript 更改 div block 的 class 名称，然后 CSS 将为您完成剩下的工作。