如何從已完成的 Javascript 事件中觸發 CSS 的更改？

Question

由於通過另一個 JavaScript function 的驗證，我正在嘗試找到一種方法來更改表單中文本的顏色。 是否有捷徑可尋？

我要為其更新顏色的元素示例：

<form name="contact" method="post" action="send_form_email.php" novalidate>
        <div class="row">
          <div class="col">
          <label for="nameInput">Name:*</label>
          <input name="name" type="text" class="form-control" id="nameInput" placeholder="E.g. Alan Turing" oninput="bootstrapValidate('#nameInput', 'required:Please fill out this field')">
        </div>
        </div>
        <div class="row">
          <div class="col-sm-12 col-md-6">
            <label for="emailInput">Email:*</label>
            <input name="email" type="email" class="form-control" id="emailInput" placeholder="E.g. name@domain.com" oninput="bootstrapValidate('#emailInput', 'email:Enter a valid E-Mail!|required:Please fill out this field')">
          </div>
          <div class="col-sm-12 col-md-6">
            <label for="telInput">Telephone:</label>
           <input name="tel" type="tel" class="form-control" id="telInput" placeholder="E.g. (01452) 714 xxx">
          </div>
        </div>
        <div class="form-group">
          <label for="msgInput">Message:*</label>
          <textarea name="msg" class="form-control" id="msgInput" placeholder="E.g. Hello world!" oninput="bootstrapValidate('#msgInput', 'required:Please fill out this field')"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>

Answer 1

您可以將 CSS class 添加到您的元素：

// styles.css
.warning {
  color: red;
}

// scripts.js
document.getElementById('msgInput').classList.add('warning');

Answer 2

例如document. GetElementById('msgInput').style.color='#ABC666'; document. GetElementById('msgInput').style.color='#ABC666';

另一種方法是切換包含如下規則的 class：JS: document. GetElementById('msgInput').classList.add('valid'); document. GetElementById('msgInput').classList.add('valid');

CSS: .valid { color: #ABC666; } .valid { color: #ABC666; }

上述 JS 代碼必須放在事件監聽器中。